Effetto rimbalzo JQuery UI - rimbalza solo una volta immettendo div

Question

Ho un div che voglio rimbalzare una volta, quando il mouse entra/passa sopra il div.

Il codice che ho funziona in Chrome, ma non in Firefox o IE.

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

In Chrome si rimbalza una volta, se lo desideri, ma in FF e IE il rimbalzo va avanti fino a quando il mouse rimane al suo posto.

Ho anche provato $('#box').one("mouseenter", function() { ma la casella rimbalza una volta e le voci successive nel div non attivano l'effetto.

Qualche idea sul perché i browser si comportano in modo diverso e cosa posso fare al riguardo?

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

volta rimbalza, l'attributo dato terrà la true booleano,
all'interno del if dichiarazione che abbiamo appena controlliamo per la sua true o false.
Su mouse-leave lo impostiamo su false, per consentire un nuovo hover e un ... nuovo rimbalzo! :)

È possibile anche scrivere quanto sopra come:

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