jQueryの：私はアニメーションが完了するまで基本的に登録しないようにクリックを必要

Question

$("#right").live("click", function(event) { 
    $(".image_scroll").animate({"left": "+=300px"}, "slow"); 
}); 

クリックキューを防ぎます。 私はreturn falseを使用しようとしましたが、それはリンクを完全に殺すようです。

また、$(".image_scroll").stop().animate({"left": "+=300px"}, "slow");を試してみましたが、それだけでアニメーションがぎこちなく見えます。

編集：ID #rightは画像にあり、aタグではありません。次のようにHTMLは次のとおりです。

<img src="/images/right.png" id="right" alt="" /> 
<div id="container"> 
    <div id="image_scroll"> 
     <img src="1.jpg" /> 
     <img src="3.jpg" /> 
     <img src="4.jpg" /> 
    </div><!-- /#image_scroll --> 
</div> <!-- /#container 

Answer 1

あなたは、あなたがアニメーションが実行しているかどうか格納する必要があります

$("#right").live("click", function(event) { 
    event.preventDefault(); 
    var src = $(this).attr('href'); 
    $(".image_scroll").animate({"left": "+=300px"}, "slow", function() { window.location.href = src; }); 
}); 

Answer 2

var handler = function(event) { 
    $("#right").die("click"); 
    $(".image_scroll").animate({"left": "+=300px"}, "slow", function(){ 
     $("#right").live("click", handler); 
    }); 
}; 
$("#right").live("click", handler); 

Answer 3

...アニメーション化するコールバックを提供する必要がありますそのためjQuery.data機能を使用できます。

$("#right").live("click", function(event) { 
    var el = $(this), 
     state = el.data('animation_state'); 
    if(state == 'busy') { 
     //ignore clicks while the animation is running 
     return false; 
    } 
    el.data('animation_state', 'busy'); 
    $(".image_scroll").animate({"left": "+=300px"}, "slow", function() { 
     //finished animating  
     //set the state to finished so we can click the element the next time 
     el.data('animation_state', 'complete'); 
    }); 
}); 

Answer 4

チェックアニメーションが実行されていると、そうならば、

0123されている場合

$("#right").live("click", function(event) { 

    if ($(".image_scroll").is(":animated")) { 
     return false; 
    } 

    $(".image_scroll").animate({"left": "+=300px"}, "slow"); 
});