Question

首先，我尝试创建一个像fiddle这样的循环动画：

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

这似乎在第一次迭代后跳过延迟。

所以我尝试了这个fiddle：

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

在这种情况下，fadeIn似乎在第一次迭代后直接跳转显示。

我很难过。所有这些操作都应该是fx队列的一部分。即使没有，我也无法解释为什么fadeIn会变成节目。有什么想法吗？

Answer 1

这是你正在寻找的更多影响：

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();

试一试，让我知道它是否有效。

Answer 2

首先想到的是fadeIn / fadeOuts是异步的......所以你要立即进入下一个链式命令。

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

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

你会看到你的2500毫秒延迟。

jQuery循环动画跳过动画

2 个答案: