jQuery animiteを無駄に繰り返させない方法。animate停止中の要素のみ実行。

この記事は6年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

jQuery animiteを無駄に繰り返させない方法です。

animateは結構便利なので使いがちですが
落とし穴もあります。。。

ホバーやクリックを繰り返したら繰り返した分だけアニメーションが実行されたり
またscrolltoであっちに行ったりこっちに行ったり…挙動がおかしかったり。

そんな時に役に立つのが
animate停止中の要素のみ取り出す$(this).not(“:animated”)の記述です。


<script type="text/javascript">
$(document).ready(function(){
$("ul.example li a").hover(
function () {
$(this).not(":animated").animate({"opacity":"1"},"slow");
},
function () {
$(this).animate({"opacity":"0.5"},"slow");
}
);
});
</script>

この例では…
 
ul.example li aにホバーした際
アニメーションが起きていない要素
もしくは終了した要素のみにフェードがおこります。
 
無駄な繰り返しも起きず、
すこしはユーザビリティも改善されるのでないでしょうか。