我正在尝试用我网站的主导航制作一些动画。有了这个,我想在导航菜单项悬停时应用弹跳效果。这是我的导航结构:
<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')
});
我已经让每个列表项在悬停时弹回,但我遇到了问题,因为当它们悬停时,列表项对齐会中断,就像它们会掉落在底部一样(我的列表项应该是内联的)。而且,每当它们悬停时,它们都会不断弹跳。
我想要发生的是,我可以限制它的弹跳效果,它只会弹跳一次,并且在鼠标从链接移开后会再次弹跳。另外,我想在弹跳时保持导航的内联显示。
这可能吗?我已经尝试了一些东西,但它不起作用。任何帮助,将不胜感激。先感谢您。
正如诺亚 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 http://jsfiddle.net/b4HL9/如果您想查看hoverIn 和hoverOut 上的弹跳,请使用小提琴。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)