。帶有多重動畫的動畫隊列

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鏈接。