我用 jQuery 构建了一个简单的菜单
http://vanquish.websitewelcome.com/~toberua/
这是菜单示例
<ul>
<li id="your-residences">
<strong>Your Residences</strong>
<ul>
<li class="menu-1"><a href=
"/~toberua/your-residences/deluxe-ocean-front-bure/">Deluxe
Ocean Front Bure</a></li>
<li class="menu-2"><a href=
"/~toberua/your-residences/premium-ocean-front-bure/">Premium
Ocean Front Bure</a></li>
</ul>
</li>
<li id="your-island">
<strong>Your Island</strong>
<ul>
<li class="menu-1"><a href=
"/~toberua/your-island/where-is-toberua/">Where is
Toberua?</a></li>
<li class="menu-2"><a href=
"/~toberua/your-island/island-facilities/">Island
Facilities</a></li>
<li class="menu-3"><a href=
"/~toberua/your-island/massage-and-spa/">Massage &
Spa</a></li>
</ul>
</li>
</ul>
这是我的 jQuery:
var menu = {
init: function() {
$('#header > ul > li').hoverIntent(function() {
$(this).find('ul').show().css({opacity: '0.3'}).height(0).animate({height: '88px', opacity: '1.0'}, 800);
}, function() {
$(this).find('ul').animate({height: '0', opacity: '0.3'}, 400, function() { $(this).hide(); });
});
}
}
这会产生一些古怪的行为。例如,有时菜单会向下滑动,然后继续向上和向下滑动。其他麻烦是菜单完美地向下滑动,然后闪烁到空白背景,然后再次返回。
有人可以指出我可能做错了什么吗?
谢谢
最佳答案
我立即注意到的唯一问题是,您的代码会很高兴地对另一个动画进行排队,而不会清除已经运行的动画的队列 - 因此,如果您稍微晃动一下鼠标,就会打开菜单并反复关闭,恶作剧风格!
关于javascript - 如何修复 jQuery 中不稳定的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/828145/