首頁  >  文章  >  web前端  >  jquery 清除動畫佇列不懷疑

jquery 清除動畫佇列不懷疑

巴扎黑
巴扎黑原創
2017-06-30 11:40:031740瀏覽

$(this).siblings().stop().fadeTo(200, 0.3);
jquery動畫存在一個佇列, 會把事件產生的動畫放在一個佇列中,噹噹來不及執行這些事件佇列的時候,會在事件結束後, 繼續執行

應用場景: 為了消除像"mouseover / mouseout / mouseenter / mouseleave "這些事件累積的動畫隊列引起的"閃爍" 問題,需要在
某些情況下, 先清除前面積累的動畫隊列, 最後再執行最後的一個動畫動作.

這個清除元素上累積的動畫隊列的命令就是"stop()". 它帶有兩個參數:
先看看w3school對stop()的解釋, 這個最權威:

jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。show, hide, toggle并不能算动画, 实质就是css的静态效果.

$(selector).stop(stopAll,goToEnd);
最重要的是, 要真正明白它的两个参数的含义:
[可选的 stopAll ]参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
[可选的 goToEnd ]参数规定是否立即完成当前动画。默认是 false。即就停在当前状态.

因此,本来, 默认地,stop() 只是去 清除在被选元素上指定的当前动画。
stop(isStopAll, isGoToEnd)
// 默认的参数是true, false
// stop(true, false) 清除所有的队列, 不要继续执行完当前未执行完的动画
// 清除动画队列: 不是恢复到动画执行之前的状态, 而是执行到哪里, 就停止在哪里. 
// 如果该动画设置了 **执行完毕后** 的回调函数,则不会执行该回调函数(因为动画并没有执行完毕)
// 如果使用stop()方法,则会立即停止当前正在运行的动画,

// 参数isGoToEnd:是否将当前动画效果执行到最后,意思就是, 停止当前动画的时候, 假设动画效果刚刚执行了一般,
// 这个时候想要的是 "动画执行之后的效果,那么这个参数就为true"。否则动画效果就会停在stop执行的时候

如果接下来还有动画等待执行,(这也是常常用到的情况, 要不然也不会去管stop()了)则 "以当前状态开始" 接下来的动画。

stop()不疑惑: 在實際開發中, 用得最多的就是stop(true, true). 首先去清除對象上當前(當前動畫隨便參數怎樣是一定要清除的)以及後續的所有動畫隊列, 並且一般要讓當前動畫執行完畢(注意, 這個執行完畢, 並不是要有這個中間的執行過程的, 而是直接就跳到當前動畫如果沒有clear時應該到達到最後狀態).然後再使用最後的一個動畫動作. 很少有單獨的單純的去使用stop()方法的!

$('ol li').mouseover(function(){
    $(this).siblings().stop(true, true).fadeTo(300, 0.3);
});
$('ol li').mouseout(function(){
    $(this).siblings().stop(true, true).fadeTo(300, 1);
});

 在很多程式語言中, 這裡就說js jquery php 都支援程式碼書寫對齊風格:

  • 目的是讓程式碼好看工整優雅

  • 什麼叫優雅, 高品質程式碼叫做優雅. 寫程式碼就像寫詩一樣優雅, 程式碼的書寫風格和排列方式, 正好跟寫詩的程式碼排列風格相類似, 都是長短句,有時候是一個單字一個字一個括號{,} 佔一行, 所以, 好的工整的代碼看起來就像一首詩一樣, 賞心悅目! 比一般的八股文要優雅得多.

  • 所以, 寫代碼時一定要有意識的 去排列對齊你的程式碼. 而且js jquery php 也支援這樣的排列:

  • 這些語言中, 回車就等同於空格等同於tab. 你可以為了對齊你的程式碼, 讓你的程式碼更工整"優雅", 可以"任意"的使用這三種排版符號. 當然, 對你的程式碼執行沒有任何影響!

以上是jquery 清除動畫佇列不懷疑的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn