Estoy tratando de hacer algunas animaciones con la navegación principal de mi sitio. Con esto, me gustaría aplicar un efecto de rebote a medida que se desplaza el elemento del menú de navegación. Esta es la estructura de mi navegación:

<div>
    <ul>
        <li><a>Home</a></li>
        <li><a>About</a></li>
        <li><a>Testimonials</a></li>
        <li><a>Contact Us</a></li>
   </ul>
</div>

Entonces tengo esto en mi archivo script.js:

$('nav ul li a').hover(function() { //mouse in
    $(this).parent().effect("bounce", { times:3 }, 'normal')
});

Ya tengo cada elemento de la lista rebotado cuando se ciernen, pero tengo problemas porque a medida que se cierran, la alineación de los elementos de la lista se rompe como si se cayeran en la parte inferior (se supone que mis elementos de la lista están en línea). También rebotan continuamente cada vez que se ciernen.

Lo que quería que sucediera es que podría limitar su efecto de rebote que solo haría el rebote una vez y simplemente volvería a rebotar después de salir del enlace. Además, quería mantener la visualización en línea de mi navegación cuando rebotaba.

¿Es posible? He intentado algunas cosas pero no funciona. Cualquier ayuda sería apreciada. Gracias de antemano