2

我正在尝试使用我网站的主导航制作一些动画。有了这个,我想在导航菜单项悬停时应用弹跳效果。这是我的导航结构:

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

我已经让每个列表项在悬停时反弹,但我遇到了问题,因为当它们悬停时,列表项对齐会中断,就像它们会被丢弃在底部(我的列表项应该是内联的)。每当它们被悬停时,它们也会不断地弹跳。

我想要发生的是,我可以限制它的弹跳效果,它只会弹跳一次,并且在鼠标从链接中移出后会再次弹跳。此外,我想在弹跳时保持导航的内联显示。

这可能吗?我尝试了一些东西,但它不起作用。任何帮助,将不胜感激。先感谢您。

4

2 回答 2

2

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

如果您想查看 hoverIn 和 hoverOut 上的弹跳,这里是小提琴。

于 2012-02-03T02:07:06.643 回答
0

Argh .. 在提供赏金之后,我找到了这个问题的答案,提供了正确的解决方案:

使用float:left而不是display:inline.

于 2012-01-29T00:26:33.180 回答