$(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. 你可以為了對齊你的代碼, 讓你的代碼更工整 "優雅", 可以"任意"的使用這三種 排版符號. 當然, 對你的代碼執行沒有任何影響!