在動畫過程中解除點擊和鼠標懸停事件

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()

u能像

$("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

您可以使用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)，如果動畫當前正在某個元素上運行，則停止並跳轉到結尾。

Answer 4

$('#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 5

回調使用類。看看下面：

$('link').click(function(event){ 
    if(event.hasClass('disabled')) 
    return; 
    else{ 
    event.animate(/*some args*/ , function(){ // call back function 
     event.removeClass('disabled'); 
    }); 
    } 
}); 

你只需要添加一個CSS的.disabled序禁用鏈接！

這段代碼比使用unbind更快，因爲它沒有開銷。

Answer 6

不要解除綁定事件處理程序。只需在動畫開啓時設置一個標誌並在完成後重置。現在在這些事件處理程序中，檢查該標誌是否設置，如果是，則返回false否則讓處理程序執行。