5

マウスがdivに入る/ホバーしたときに、一度バウンスしたいdivがあります。

私が持っているコードはChromeで機能しますが、FirefoxやIEでは機能しません。

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

Chromeでは、必要に応じて1回バウンスしますが、FFおよびIEでは、マウスが所定の位置にある限りバウンスが続きます。

私も試し$('#box').one("mouseenter", function() {ましたが、ボックスが1回バウンスし、divへの後続のエントリは効果をトリガーしません。

ブラウザの動作が異なる理由と、それについて私ができることについて何か考えはありますか？

4

1 に答える 1

11

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ブール値を保持し、ステートメント
内でそれがorであることを確認します。 マウスを離すと、それを false に設定して、新しいホバーと... 新しいバウンスを許可します! :)iftruefalse

上記のように書くこともできます：

$("#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);
});
于 2012-06-21T19:27:05.557 に答える