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

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

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

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

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

我也尝试了$('#box').one("mouseenter", function() {但是盒子反弹一次，后续的div条目不会触发效果。

关于为什么浏览器表现不同以及我能做些什么的任何想法？

Answer 1

现场演示

 $("#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，以允许新的hover和新的反弹！ 🙂

您也可以写上面的内容：

 $("#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); });