javascript - .animate 具有多个动画的队列

Question

我正在尝试使 div 从屏幕底部移动到顶部，从不透明度 0 开始，中间有不透明度 1，然后在顶部再次淡入 0。一切都必须从 3 秒延迟开始。

        $("#circle")
                .css({'display':'block'})
                .css({'opacity': '0'})
                .css({'top':$(window).height()})
                .delay(3000)
                .animate({'opacity':1},{duration:1000},"linear")
                .animate({'top':$(window).height()/2},{duration:1000, queue:false},"linear")                
                .animate({'opacity':0},{duration:1000},"linear")
                .animate({'top':0},{duration:1000, queue:false},"linear")

我也尝试使用 'queue:false' 但它仍然无法正常运行，而且这也不是线性的。有任何想法吗？

Answer 1

您应该更好地使用对象表示法，例如：

     $("#circle")
                .css({
                      'display':'block',
                      'opacity': '0',
                      'top':$(window).height()
}
)
                .delay(3000)
                .animate({ 
                           'opacity':1 , 
                           'top':$(window).height()/2
                         },
                         {duration:1000},"linear")
                .delay(1000)
                .animate({
                          'opacity':0,
                          'top':0
                         },
                         {duration:1000},"linear");

您可以尝试这个或尝试使用$(this)选择器在多行之间设置延迟。

祝你好运，拥有一个 jsfiddle 链接总是有帮助的。