efeito de salto @jquery quebra o alinhamento embutido da lista

Estou tentando fazer algumas animações com a navegação principal do meu site. Com isso, eu gostaria de aplicar um efeito de rejeição à medida que o item do menu de navegação é pairado. Esta é a estrutura da minha navegação:

<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>

Então eu tenho isso no meu arquivo script.js:

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

Eu já tenho cada item da lista devolvido quando eles são suspensos, mas estou tendo problemas porque, à medida que são suspensos, o alinhamento dos itens da lista é interrompido como se fossem descartados na parte inferior (meus itens da lista devem estar alinhados). Eles também saltam continuamente sempre que estão sendo pairados.

O que eu queria que acontecesse é que eu pudesse limitar o efeito de salto, que faria o salto apenas uma vez e voltaria a saltar novamente após o mouse sair do link. Além disso, eu queria manter a exibição em linha da minha navegação ao saltar.

Isso é possível? Eu tentei algumas coisas, mas não está funcionando. Qualquer ajuda seria apreciada. Agradeço antecipadamente