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

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

Here如果您想查看hoverIn 和hoverOut 上的弹跳，请使用 fiddle 。