Question

我正在使用此代码来延迟元素进入屏幕的可视区域，但第一个动画是完全不必要的，除了启动延迟然后延迟的队列。

$("#top-message").animate({top: '-500px'},400).delay(1000).animate({top: '0px'},800).delay(3000).animate({top: '-500px'},800);

有更合理的方法吗？

Answer 1

我不明白。如果不需要第一个.animate()，为何会这样做？如果您只需要额外的400ms，请将其添加到第一个.delay()。

示例： http://jsfiddle.net/LFt4k/

$("#top-message").delay(1400).animate({top: '0px'},800)
                 .delay(3000).animate({top: '-500px'},800);

您不需要初始.animate()来启动队列。 The .delay() method将使用默认的"fx"队列。

修改

您可能遇到的问题是，如果#top-message没有top的初始值，则在某些浏览器中会将其报告为auto。此值对动画无用。

要解决此问题，请在CSS中为#top-message提供初始值：

#top-message { top: -500px; }

...或在javascript：

$("#top-message").css({top:-500}) .delay(1400).animate({top: '0px'},800) .delay(3000).animate({top: '-500px'},800);

Answer 2

如何在回调中执行此操作？

$("#top-message").animate({top: '-500px'}, 400, function () {
    $(this).delay(1000).animate({top: '0px'}, 800, function () {
        $(this).delay(3000).animate({top: '-500px'}, 800);
    });
});

示例： http://jsfiddle.net/Avinash/LFt4k/2/

更好的方法来启动jQuery的延迟？

2 个答案: