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