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

Question

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

Answer 1

如果您想在一段时间内禁用链接，那么使用类既容易又快捷。看下面：

$('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 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), 如果动画当前正在一个元素上运行，则停止，并跳转到最后。