2012-06-21 13 views
5

divにマウスを置いたりマウスオーバーすると、一度バウンスしたいdivがあります。JQuery UIバウンスエフェクト - divに入ると一度だけバウンスする

私はChromeで動作しますが、FirefoxやIEでは動作しません。必要に応じて

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

は、Chromeで一度バウンスが、FFとIEでバウンスは限りマウスが所定の位置に残るようになります。

また、私は$('#box').one("mouseenter", function() {を試しましたが、ボックスは一度バウンスし、divに続くエントリはエフェクトをトリガーしません。

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

答えて

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またはfalseだかどうかを確認if文の中trueブール、
を開催します。
マウスを離すと、新しいホバーと...新しいバウンスができるように、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); 
}); 
+3

美しいです。ありがとうございました! –