在此页面上:
http://www.arvag.net/old/smsbox.de/
当您将鼠标悬停在“Informationen”和“Überins”上时,它会显示一个子菜单。当你移开鼠标时,它会隐藏。通常情况下,我对每个单独悬停的jQuery排队都有问题,然后它继续为所有这些悬停设置动画。我试图实现stop()
,但我无法让它正常工作。
这是我正在使用的代码:
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#nav_menu > .center > ul > li').hover(function() {
$(this).stop(true,true).children('ul').slideToggle('slow');
}).click(function(){
return false;
});
});
//]]>
</script>
谢谢!
答案 0 :(得分:4)
您需要在两个方向.stop()
停止队列,否则悬停的mouseenter
部分会一直排队等动画。此外,既然你正在切换,你可以像这样缩短它:
$('#nav_menu > .center > ul > li').hover(function() {
$(this).children('ul').stop(true,true).slideToggle('slow');
}).click(function(){
return false;
});
您需要.stop()
元素上的ul
,因为这就是动画效果。试试这个,你会发现它有点笨拙,因为它正在重置动画而不是排队。另一种方法是使用:visible
和:hidden
选择器来阻止队列,这样做...我更喜欢这种效果,但取决于你:)
$('#nav_menu > .center > ul > li').hover(function() {
$(this).children('ul:hidden').slideDown('slow');
}, function() {
$(this).children('ul:visible').slideUp('slow');
}).click(function(){
return false;
});
答案 1 :(得分:1)
我相信你也必须将stop(true,true)
放在悬停部分上。然后它会中断当前正在执行的其他动画,除非我弄错了。
$('#nav_menu > .center > ul > li').hover(function() {
$(this).stop(true,true).children('ul').slideToggle('slow');
},function(){
$(this).stop(true,true).children('ul').slideToggle('slow');
}).click(function(){
return false;
});