Jqueryアニメーション間で関数をキューに入れよう

Question

こんにちは私は階層化されたイメージエフェクトを作成しようとしていますが、jqueryアニメーションと一緒に関数をキューに入れることに問題があります。

基本的には、すべての.bar divを非表示にしてから、その機能を実行してから、一度に1つずつフェードインさせる必要があります。このようにするには、複数の画像が存在するため、この効果は、それらの間の遷移を作成するものになります。

<div class="container"> 
<div class="image"> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
    <div class="bar"> 
    </div> 
</div> 

とCSSこの

.container {width:700px;height:400px;margin:0 auto;background:#FF0;} 
.image {background:green; width:700px; height:300px; } 
.bar { height:300px; width:50px; background:orange; float:left;} 

とJavaScript/jQueryの誰もがこれを行う方法についてのアイデアを持っている場合、この

$(function(){ 

var i = -1; 

function fading(){ 
    function fader(){ 
    setTimeout(function() {   
      i++;      
      if (i < 15) {   
      $('.bar:eq(' + i + ')').fadeIn('200'); 
      fader();   
      }      
     }, 100) 
    } 
    fader() 
} 

$('input').click(function(){ 

    $('.bar').hide().queue(function(){ 
        fading() 
        $('this').dequeue(); 
        }); 
}); 


}); 

のようなものであるようです別の方法で達成されるか、または私はlayddを持っている方法で達成したでしょう。

Answer 1

.queueコールがすべてfadeIn()コールと混ざり合っているため、この方法でアニメーションキューを使用することはできません。また、アニメーションキューを使用しているコール以降も待機しません。別のキューを作成して使用することもできますが、それはおそらくそれに値するものではありません。

15層で終了したときにfader()関数が次のアクションをトリガするのはなぜですか？

または、15層で完了したときにコールできるfader()にコールバック関数を渡すことはできますか？

（私はelseを追加場所を確認）私はあなたが何をしようとしている正確に何を得ることはありませんが、あなたは15層でフェージング完了したら、あなたはここで別の関数をキックオフすることができます

function fading() { 
    var cntr = -1; 
    function fader() { 
     setTimeout(function() {   
      cntr++; 
      if (cntr < 15) {   
      $('.bar:eq(' + cntr + ')').fadeIn('200'); 
      fader();   
      } else { 
      // done fading in the 15 items, now you can call some other function 
      // here to start the next operation 
      afterFade(); 
      } 
     }, 100); 
    } 
    fader(); 
} 

これにあなたのクリックのコードを簡素化してみてください。

$('input').click(function(){ 
    $('.bar').hide(); 
    fading(); 
}); 

.hide()は同期です（それがアニメーションキューを使用していない）ので、あなたはちょうどそれの後fading()を呼び出すことができます。

また、fading()への2回目のコールでcntr変数を再初期化する必要があります。上記のコード例では、変数の名前をiからcntrに変更し、定義と初期化をfading()関数の先頭に移動したので、後続の各呼び出しで自動的に初期化されます。