我正在尝试使用我网站的主导航制作一些动画。有了这个,我想在导航菜单项悬停时应用弹跳效果。这是我的导航结构:
<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')
});
我已经让每个列表项在悬停时反弹,但我遇到了问题,因为当它们悬停时,列表项对齐会中断,就像它们会被丢弃在底部(我的列表项应该是内联的)。每当它们被悬停时,它们也会不断地弹跳。
我想要发生的是,我可以限制它的弹跳效果,它只会弹跳一次,并且在鼠标从链接中移出后会再次弹跳。此外,我想在弹跳时保持导航的内联显示。
这可能吗?我尝试了一些东西,但它不起作用。任何帮助,将不胜感激。先感谢您。