jquery - 在 jQuery 中启动延迟的更好方法？

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