JQuery UI反弹效果——只在输入div时反弹一次。

I have a div that I want to bounce once, when the mouse enters/hovers over the div.

我有一个div，我想要跳出来一次，当鼠标进入/盘旋在div上。

The code I have works in Chrome, but not in Firefox or IE.

我的代码适用于Chrome，但不适用于Firefox或IE。

In Chrome it bounces once as desired but in FF and IE the bouncing goes on as long as the mouse remains in place.

在Chrome中，只要鼠标停留在适当的位置，它就会弹起一次。

I also tried $('#box').one("mouseenter", function() { but the box bounces once, and subsequent entries into the div do not trigger the effect.

我也试过$(“#箱”)。一个(“mouseenter”，function(){但是这个框会弹出一次，并且随后进入div的条目不会触发这个效果。

Any thoughts on why the browsers are behaving differently and what I can do about it?

关于浏览器为什么会有不同的行为，我能做些什么?

1 个解决方案

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

Once it bounces, the element data attribute will hold the true boolean,
inside the if statement we just check for it's true or false.
On mouse-leave we just set it to false, to allow a new hover and a... new bounce! :)

一旦它弹起，元素数据属性将保存真正的布尔值，在if语句中，我们只检查它是真还是假。在鼠标离开时，我们将它设置为false，允许一个新的鼠标悬停和一个…新振作起来!:)

You can also write the above like:

你也可以这样写:

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

#1