文本破坏了鼠标悬停

Question

当光标悬停时，我会为 div 设置动画。
这适用于鼠标悬停（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/

只需在红色 div 动画时尝试 mouseover 和 mouseout。 动画将受到蓝色 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
});