jQuery animiteを無駄に繰り返させない方法。animate停止中の要素のみ実行。
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
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にホバーした際
アニメーションが起きていない要素
もしくは終了した要素のみにフェードがおこります。
無駄な繰り返しも起きず、
すこしはユーザビリティも改善されるのでないでしょうか。