jquery - アニメーション中のクリック イベントとマウスオーバー イベントのバインドを解除する

Question

アニメーションが完了するまでクリック イベントとマウスオーバー イベントのバインドを解除し、後でバインドするにはどうすればよいですか?

Answer 1

アニメーションが開始したら、これらを使用します。

$('#foo').unbind();              //unbinds all
$('#foo').unbind('click');       //only click event
$('#foo').unbind('mouseover');   //only mouseover event

完了したらイベントをバインドします...

ここにフィドルがあります： http://jsfiddle.net/YmJzt/2/

フィドルの基本は次のとおりです。

function aClick() { alert("YAY! I'm working") }

$("#animateBtn").click(function () {
    //First Unbind
    $("#theone").unbind('click', aClick).text("Does nothing...");

    //Then Animate
    $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500,
    //On animation complete bind back... 
    function () {$("#theone").click(aClick).text("Can Click!");}
   );
});

Answer 2

.unbind()を参照

次のようなイベントのバインドを解除できます

$("p").unbind("click,mouseover");

アニメーションが完了するまで削除

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
     $("p").unbind("click,mouseover");// herer unbind done  
  });

$("p").bind("click,mouseover");// here bind again  
    });

Answer 3

$('#clickme').unbind('click').unbind('mouseover');
$( "#book" ).animate({
            opacity: 0.25,
            left: "+=50",
            height: "toggle"
        }, 5000, function() {
             $('#clickme').bind('click', click_function).bind('mouseover', mouseover_function)
        });  
$( "#clickme" ).click(click_function);
function click_function(){
     //do something
}
function mouseover_function(){
     //do something
}

これにより、アニメーションの直前に要素からクリックがバインド解除され、アニメーションの完了時にコールバックで再バインドされます

Answer 4

is(:animated)アニメーションが現在実行されているかどうかを確認するために使用できます。

$('element').click(function(){

     if($(this).is(':animated')){

         // the element is currently animated

     }else{

         // the element is not being animated

     }

})

現在実行中のアニメーションを停止したい場合は、stop()を使用できます。を使用stop(true, true)すると、要素で現在アニメーションが実行されている場合は停止し、最後にジャンプします。