jQueryのanimateが何度も繰り返さないように。

jQueryのanimateを立て続けに実行すると、
何度も無駄にリピートされることがありますよね。

そんなときは.not(":animated")を指定してあげましょう！

これで、animate実行中の要素が対象外になります。


$(function(){
　$(".sample").hover(function(){
　　$(this).not(":animated").animate({opacity:"0.5"},500);
　},function(){
　　$(this).animate({opacity:"1"},500);
　});
});


たとえば、こんな感じです。

これでsampleクラスの要素をホバーしたら、５００ミリ秒かけて透過率が５０％になります。
マウスが要素から外れれば、５００ミリ秒かけて透過率が元に戻ります。

５００ミリ秒以内でホバーを繰り返せば、本来は繰り返した分だけ透過率変化も繰り返します。

でも、.not(":animated")を指定していれば、animate実行中はこの命令が行われません。




(・∀・)