JQuery UI efecto de rebote: rebote solo una vez al ingresar a div

Question

Tengo un div que quiero rebotar una vez, cuando el mouse entra/pasa el cursor sobre div.

El código que tengo funciona en Chrome, pero no en Firefox o IE.

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

En Chrome que rebota una vez como se desee, pero en FF y IE el rebote ocurre en el tiempo que el ratón permanece en su lugar.

También probé $('#box').one("mouseenter", function() { pero la caja rebota una vez, y las entradas subsiguientes en el div no activan el efecto.

¿Alguna idea de por qué los navegadores se comportan de manera diferente y qué puedo hacer al respecto?

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

Una vez que rebota, el atributo de datos elemento llevará a cabo el booleano true,
dentro de la instrucción if que sólo comprueban que es true o false.
Al salir del mouse, simplemente lo configuramos en falso, para permitir un nuevo vuelo estacionario y un ... ¡nuevo rebote! :)

También puede escribir lo anterior como:

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