jquery animate stop函數解析

今天咱們來看看jquery中動畫操做的stop函數。其實我至今不是很明白啊,因此此文算是求救以及拋磚引玉。css

在jquery 1.7版本之前,stop支持兩個參數,分別是clearQueue和jumpToEnd。這點能夠參考官方文檔:stopjquery

今天我寫個示例,該例參考了w3school的在線測試代碼:jquery stop 參數示例api

本人代碼示例demo1demo2函數

stop(clearQueue,jumpToEnd)函數分析

僅僅從官方API上給出的說明,咱們就知道,第一個參數是針對的其它動畫隊列(不包含當前動畫),第二個參數則是當前動畫。測試

那麼,什麼是動畫隊列呢?動畫

所謂的動畫隊列就是一系列要執行的動畫,好比對一個盒子先在前一秒執行挪動動畫,再過一秒執行變大的動畫。那麼,這就是兩個動畫了。.net

再好比,點擊某個按鈕a,給盒子b觸發動畫效果,每次挪動10px,挪動10px須要的時間是2s,那麼以很快的速度狂點這個a按鈕,你在2s時間裏點了10次,這個動畫須要累積10次的。雖然咱們2s裏只能完成1個動畫效果,可是剩下的9個動畫仍是要完成的,這就造成了動畫累積,跟排隊似的,若不作任何處理,將會逐個按照先來先動畫的規則完成。xml

但現實中,這種動畫累積並不是是咱們指望的結果。因此,咱們須要對動畫進行更多的操做。從stop的參數來看,對於動畫的操做,分爲當前動畫等候動畫隊列,傳入的參數爲boolean值類型。隊列

  • clearQueue,是否清除等候動畫隊列,默認false,便是不清除等候動畫隊列,設置爲false,則清空等候動畫隊列。
  • jumpToEnd,是否當即完成當前動畫,默認false,便是中止當前動畫,設置爲true,則當即完成當前動畫。

沒錯,上面的例子確實能夠驗證stop函數的參數做用。文檔

可是,尼瑪啊,我又寫了個例子,我感腳個人認知又被顛覆了。。。

在線demo,請猛戳 jquery stop 示例3

記住,測試時,光標迅速進入和離開。而後,光標再次進入時,就沒反應了。。

另外,既然第一個設置是針對等候動畫隊列的,爲什麼我設置爲false時,那些積累的動畫隊列就不執行了呢?

仍是執行了,可是很短暫?

求大神告知我真相。

相關文章
相關標籤/搜索