Jqueryアニメーション間で関数をキューイングする

こんにちは、私は層状の画像効果を作成しようとしているが、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>

and the CSS is like this

.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;}

and the javascript/jquery is like this

$(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();
                    });
});


});

If anyone has ideas on how this can be done differently or achieved in the way I have laydd out that would be great

0

1 答え

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

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

または、コールバック関数を15層で終了したときに呼び出すことができる fader()にコールバック関数を渡すことができますか?

私はあなたがしようとしていることを正確には得ていませんが、15のレイヤーにフェードアウトしたときに別の関数を起動できます(どこに else

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() is synchronous (it doesn't use the animation queue) so you can just call fading() right after it.

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

0
追加された
どのようにして fader()関数の次のアクションをキューに入れますか?
追加された 著者 Psylant,
うんうんうまく動作しますが、問題をクリックして再び実行されない関数を実行するときです。言い換えれば、最初のクリックは、クリックされた後でも動作します。ありがとう、あなたの助けを借りて、申し訳ありませんが、正確に私がテキストを達成しようとしていることを説明することは難しいです。
追加された 著者 Psylant,
それを行う1つの方法は、私の答えに追加したコード例です。
追加された 著者 jfriend00,
後のクリックでも機能させるために、私の答えにもっと追加しました。おそらく、忙しいアニメーション中はクリックから保護する必要があります。
追加された 著者 jfriend00,