1

まず、このフィドルのようなループ アニメーションを作成しようとしました。

function rotator() {
  $('#foo').stop(true).delay(500).fadeIn('slow').delay(2500).fadeOut('slow',rotator);
}
$('#foo').hide();
rotator();​

これは、最初の反復後の遅延をスキップするように見えます。

だから私はこのフィドルを試しました:

function rotator() {
  $('#foo').stop(true).delay(500).fadeIn('slow').delay(2500).fadeOut('slow',rotator);
}
$('#foo').hide();
rotator();​

この場合、fadeIn は、最初の繰り返しの後に、まっすぐジャンプして表示されるように見えます。

私は困惑しています。これらのすべての操作は、fx キューの一部である必要があります。たとえそうでなかったとしても、なぜフェードインがショーに変わるのか説明できません。何か案は？

4

2 に答える 2

2

これはあなたが探している影響の多くですか？

function rotator() {
    $( '#foo' ).delay( 500 ).fadeIn( 'slow', function() {
        $( this ).delay( 2500 ).fadeOut( 'slow', rotator );
    });
}
$('#foo').hide();
rotator();

更新: コードに問題があった理由を説明する必要があります。jQuery では、アニメーションは非同期 (ノンブロッキング) です。したがって、コードは同時にアニメーションをキューに入れていましたが、将来のある時点まで実行されませんでした。次のアニメーションをコールバックで実行して、前のアニメーションが完了するまで起動しないようにする必要があります。

別の更新: 次のコードを試してみたところ、うまくいったようです。試してみます：

function rotator() {
    $( '#foo' ).delay( 500 ).fadeIn( 'slow' ).delay( 2500 ).fadeOut( 'slow', rotator );
}
$('#foo').hide();
rotator();

試してみて、うまくいくかどうか教えてください。

于 2012-05-09T06:07:00.153 に答える
1

最初に考えたのは、fadeIn/fadeOuts は非同期であるということです。そのため、すぐに次のチェーン コマンドに移動します。

たとえば、最初のコード セットで次のようにした場合:

function rotator() {
    $('#foo').stop(true).delay(500).fadeIn('slow', function(){
        $('#foo').delay(2500).fadeOut('slow',rotator);
    })
}
$('#foo').hide();
rotator();​

2500 ミリ秒の遅延が表示されます。

于 2012-05-09T06:05:48.673 に答える