jQueryアニメーションの変更テキストの無限ループ

Question

私は、2秒間の休止を入れた3つの異なるテキストを巡って、無限ループとして実行される、フェードアウト - 変更テキスト - フェードインの概念に基づいてテキスト変更アニメーションを作成しようとしています。

私は私のJavascriptのファイルで、このjQueryのコードを持っている：

$(document).ready(function changeText(){ 
    $(this).find("#changeText").delay(2000).animate({opacity:0},function(){ 
     $(this).text("foo").animate({opacity:1},function(){ 
      $(this).delay(2000).animate({opacity:0},function(){ 
       $(this).text("bar").animate({opacity:1}, function(){ 

       }); 
      }); 
     }); 
    }); 
}); 

それがになっているものありません、しかし、もちろん、一度だけ。私は何をしてもループとして機能するようには思えません。私は同様のスタックオーバーフローの質問をたくさん閲覧しているが、誰も私の問題を解決していないようだ。

私はsetInterval、window.functionをループと他のいくつかのsoltuionsで試してみましたが、あまりにも多くの再帰に関するエラーを投げたり、ブラウザをクラッシュさせたり、まったく動作しません。そのように働くことさえできないか、私は何か正しいことをしていません。

<div class="container"><span id="changeText">blah</span></div> 

Answer 1

あなたは「this」あなたのコードの開始の基準を使用しているが、それはそれはを指してい要素にコンテキストが欠落しています：

これは私が変更しようとしているHTMLです。また、idが 'changeText'の要素があるため、セレクタで直接ターゲティングすることもできます。

$(document).ready(function(){ 
    $("#changeText").delay(2000).animate(
    {opacity:0 },function(){ 
     $(this).text("foo").animate({opacity:1},function(){ 
     $(this).delay(2000).animate({opacity:0},function(){ 
      $(this).text("bar").animate({opacity:1}, function(){ 
      }); 
     }); 
    }); 
    }); 
}); 

の作業例：https://jsfiddle.net/q1o2f5jx/

EDIT：

は、コードの改善を行い、アレイ内のテキストを追加したsetIntervalにインデックスをインクリメントします。

var textArray = ["foo","bar","blah1","blah2"]; 
var index = 0; 
setInterval(function(){   
$("#changeText").animate({ 
opacity:0 
},function() 
{ 
    if(textArray.length > index) { 
    $(this).text(textArray[index]).animate({opacity:1}) 
    index++; 
    } 
    else 
    index = 0; 
}); 
},2000); 

の作業例：https://jsfiddle.net/q1o2f5jx/2/

Answer 2

私は愚かでなければならない、私はそれを見るためにのために、解決策はあまりにも単純なものでした。私もそれを試してみましたが、私はそれがうまくいかないように間違ったものを書いたに違いありません。今度はスコープの外から '$（document）.ready'スコープ内の関数を再呼び出ししようとしていましたが、これは不可能に近いものですが、実際に行う必要はありません。

jQueryを内部に持つ通常のJavaScript関数を作成しました。これは関数の外で一度呼び出され、すべての再呼び出しは最後の.animate（）コールバックから行われています。

function changeText(){ 
    $("#changeText").delay(2000).animate({opacity:0},function(){ 
     $(this).text("foo").animate({opacity:1},function(){ 
      $(this).delay(2000).animate({opacity:0},function(){ 
       $(this).text("bar").animate({opacity:1},function(){ 
        $(this).delay(2000).animate({opacity:0},function(){ 
         $(this).text("blah").animate({opacity:1},function(){ 
          changeText();       
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}; 

changeText();