JQuery UI弹跳效果 - 在进入div时仅反弹一次

Question

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

我在Chrome中使用的代码，但在Firefox或IE中没有。

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

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

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

有关浏览器为什么表现不同以及我可以采取哪些措施的想法？

Answer 1

的 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);
});

一旦它反弹，元素数据属性将保持true布尔值，
在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);
});