0

正しい方法を除いて、いくつかの異なる方法を試しました。

これを試す：

setTimeout( function() { 
    $('.historyTextBoxes p')
     .bind('showText', function(e) {
         $(this).fadeIn(800, function(){
             $(this).next().length && $(this).next().trigger("showText");
         });
    }).eq(0).trigger('showText');
}, 4000);

4 秒間待ってから、各段落を 0.800 ミリ秒の速度で次々とフェードインします。

私がやりたいのは、0.800 ミリ秒で段落をフェードインし、次の段落がフェードインするまで 4 秒待つことです。

基本的なセットアップ:

$('.historyTextBoxes p')
.bind('showText', function(e) {
    $(this).fadeIn(800, function(){
        $(this).next().length && $(this).next().trigger("showText");
        alert('pause here');
    });
}).eq(0).trigger('showText');

動作しますが、アラートがある場所で一時停止するための正しい構文をまだヒットしていません。

関数の呼び出しをスローしようとしましたが、待機する以外に何も実行する必要はありません。

したがって、疑似コードでは、次のようなものを定義しようとしています:

function wait() {
    pause(for 4 seconds);
}

次に、上記のアラートの代わりにその関数を呼び出すことができます。私の問題setTimeoutは、関数を定義する必要があることですが、何かを考えすぎています。

4

2 に答える 2

1

これはそれを行う必要があります：

function showAll() {
    var p = $('.historyTextBoxes p').get();  // array of elements

    (function loop() {
        if (p.length) {
            var el = p.shift();
            $(el).fadeIn(800).delay(4000).promise().done(loop);
        }
    })();
}

http://jsfiddle.net/4dNr3/2/のデモ

これは明示的なタイマーをまったく使用せず、次のフェーズをトリガーするイベントも使用しないことに注意してください。すべてのタイミングはアニメーション キューに依存しています。タイマーとアニメーションを並行して実行するのではなく、インターリーブすることを保証できない限り、通常、タイマーとアニメーションを混在させることはお勧めできません。この場合でもOKです。

于 2013-07-31T18:33:57.213 に答える
1

使い方setTimeoutは正しかったのですが、間違った場所に適用しました。

$('.historyTextBoxes p').bind('showText',function(e) {
  $(this).fadeIn(800,function(){
    // this is the callback after the fadein
    // here we want to wait (use a timeout)
    var next = $(this).next();
    if (next.length)
      setTimeout(function() {
        // before the next text is shown
        next.trigger("showText");
      }, 4000);
  })
}).eq(0).trigger('showText');
于 2013-07-31T18:31:45.203 に答える