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

使用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 回答
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/

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

于 2013-07-31T18:33:57.213 回答