jquery動畫佇列簡單介紹

antzone發表於2017-04-12
jQuery動畫佇列

本章節介紹一個簡單的概念，那就是什麼是動畫佇列。

先看看一段程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
$('span', this).animate({
  left: '0',
  width: '100%',
  right: '0'
}, 200);

上面的程式碼，可能很多朋友認為是三個動畫佇列，分別設定left、width和right屬性值。

其實並非如此，這個三個屬性的變化是同時進行的，可以認為是一個複合動畫，但不是一個佇列。

再來看一段程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
$('div').animate({ 'left': '250px' }, 1000).animate({ 'left': '0px' }, 1000)

上面的程式碼才是一個動畫佇列，設定動作會依次執行。


相關文章