Question

如何取消绑定点击和鼠标悬停事件，直到动画完成并在之后绑定它们？

Answer 1

如果要在一段时间内禁用链接，则使用类更容易，更快捷。看下面：

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

你只需要为.disabled添加一个css以禁用链接！

这段代码比使用unbind更快，因为它没有开销。

Answer 2

当动画开始使用时：

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

请参阅.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 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

不要取消绑定事件处理程序。只需在动画开启时设置一个标志，并在完成后重置它。现在在那些事件处理程序中，检查是否设置了该标志，如果是，则返回false，否则让处理程序执行。

Answer 6

您可以使用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)，如果动画当前正在元素上运行，则会停止，并跳转到结尾。

在动画期间取消绑定点击和鼠标悬停事件

6 个答案: