jQuery UI反弹效果-进入div时仅反弹一次 [英] JQuery UI bounce effect - bounce only once on entering div

问题描述

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

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

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

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

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

在Chrome中，它会根据需要弹跳一次，但在FF和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.

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

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

关于浏览器为何表现不同的任何想法以及我该怎么办?

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

推荐答案

实时演示

$("#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数据属性将保留true布尔值
在if语句中，我们只是检查它是true还是false.
在鼠标离开时，我们将其设置为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! :)

您还可以像上面这样写:

$("#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时仅反弹一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！