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链接总是有帮助的。

具有多个动画的.animate队列

1 个答案: