Question

当光标悬停时，我会为div设置动画。
这适用于mouseover（jquery）现在问题是该div上的文本中断了动画，因为光标不再与div直接接触。

我该如何解决这个问题？

//navi is the div.

    $("#navi").mouseover(function(){
        $("#navi").stop();
        $("#navi").animate({width:'200px'},{queue: false,easing:"easeOutBounce",duration:1200});
    });

相同的代码在text-div上。

您可以在此处http://jsfiddle.net/rSQaP/17/

进行测试

在red div动画时尝试鼠标悬停和鼠标移动。动画将受到蓝色div上的鼠标悬停操作的影响。

Answer 1

$("#navi").mouseover(function(){

  $("#navi").stop().animate({width:'200px'},{queue: false,easing:"easeOutBounce",duration:1200});
  while($("#navi").is(":animated")){
    $("#navi").off('click').off('mouseover'); 
    //you can add all the events you want to ignore
    //if it doesn't work, use unbind instead of off
  };
  //re-enable these events
  $("#navi").on('click').on('mouseover'); //here you could use bind instead of on
});

文本扰乱鼠标悬停

1 个答案: