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

第一个想法是淡入/淡出是异步的..所以你会立即进入下一个链式命令。

例如，在您的第一组代码中，如果您这样做：

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 回答