jQuery UI反弹效果-进入div时仅反弹一次

当鼠标进入/悬停在div上时，我有一个要反弹一次的div。

我拥有的代码可在Chrome中使用，但不能在Firefox或IE中使用。

http://jsfiddle.net/d7UjD/73/

在Chrome中，它会根据需要弹跳一次，但在FF和IE中，只要鼠标保持在原位，弹跳就会继续进行。

我也尝试过$('#box').one("mouseenter", function() {，但是该框会反弹一次，并且随后进入div的条目都不会触发效果。

关于为什么浏览器的行为有所不同以及对此我可以做些什么的任何想法？

最佳答案

LIVE DEMO

$("#box").hover(function(){
if ( !$(this).data("bouncing") ){
      $(this).effect("bounce", { direction: 'up', distance: 10, times: 1 })
             .data("bouncing", true);
}
},function () {
     $(this).data("bouncing", false);
});

反弹后，element data属性将保留true bool 值，
在if语句中，我们只是检查它是true还是false。
在鼠标离开时，我们将其设置为false，以允许新的悬停和新的反弹! :)

您也可以像上面这样写:

$("#box").on('mouseenter mouseleave',function( e ) {
  var el = $(this);
  if(!el.data("b"))el.effect("bounce", {direction:'up',distance:10,times:1} );
  el.data("b",e.type=="mouseenter"?true:false);
});

关于jQuery UI反弹效果-进入div时仅反弹一次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11145010/