Эффект отказов jquery нарушает выравнивание списка

Question

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

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

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

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

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

Answer 1

Как сказал Ной 1989, ключом является float:left:

    li {
        float:left;
    }

Вот js, которые я использовал:

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

Здесь - это скрипкаесли вы хотите увидеть подпрыгивание на hoverIn и hoverOut.

Answer 2

Argh .. сразу после предложения щедрости я нашел ответ на этот вопрос , который обеспечивает правильное решение:

Используйте float:left вместо display:inline.