Я пытаюсь сделать некоторые анимации с основной навигацией моего сайта. При этом я хотел бы применить эффект отскакивания, когда элемент меню навигации находится в режиме наведения. Это структура моей навигации:

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

Тогда у меня есть это в моем файле script.js:

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

У меня уже есть все элементы списка, когда они отображаются, но у меня возникают проблемы, потому что при их перемещении выравнивание элементов списка прерывается, как если бы они были опущены внизу (мои элементы списка должны быть встроенными). Кроме того, они постоянно подпрыгивают всякий раз, когда их преследуют.

Я хотел бы, чтобы я мог ограничить его эффект отскакивания, чтобы он выполнял отскок только один раз и просто отскакивал снова после наведения мыши по ссылке. Кроме того, я хотел сохранить встроенный дисплей моей навигации при подпрыгивании.

Это возможно? Я попробовал кое-что, но это не работает. Любая помощь будет оценена. Заранее спасибо.