Question

除了正确的方法之外，我尝试过几种不同的方法。

试试这个：

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秒，然后以.800毫秒的速度逐个淡入每个段落。

我想做的是在.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的问题一直是'有'定义一个函数，但我在想什么。

Answer 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');

Answer 2

这应该这样做：

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/

请注意，它根本不使用显式计时器，也不使用任何事件来触发下一个阶段 - 它依赖于所有计时的动画队列。请注意，除非您可以保证它们是交错的而不是并行运行，否则混合定时器和动画并不是通常的好主意。在这种情况下，没关系。

setTimeout / pausing / etc.

2 个答案: