Question

嗨朋友我正在使用jQuery处理简单的下拉菜单当我在菜单上鼠标输入时，使用slideDown(2000)会出现子图标，当我鼠标移出时，同样会slideUp(2000) 。现在的问题是，如果用户鼠标进入主菜单并突然鼠标移出，那么根据我的代码，幻灯片效果打开整个然后关闭。我只是想当用户从菜单鼠标输出时子菜单将会滑动而不需要完全打开...为了您的尊重我已经提到了下面的代码

脚本

$(document).ready(function(e) {
/*Navigation Code*/
$('#mainNav nav ul li').mouseenter(function(){

    $(this).children('ul').slideDown(200);
    })
$('#mainNav nav ul li').mouseleave(function(){

    $(this).children('ul').slideUp(200);
    })
$('#mainNav nav ul li > ul li ul').parent('li').children('a').css({background: 'url(images/navArrow.png) 184px 18px no-repeat'});

/*Navigation Code Ends*/
});

我认为stop()会有所帮助，但当我使用它时，我的代码就会停止工作

请帮帮我们..提前致谢：）

Answer 1

我尝试添加.stop()，它似乎对我有用：http://jsfiddle.net/EjnHQ/

像这样：

$('#mainNav nav ul li').mouseenter(function(){
    $(this).children('ul').stop().slideDown(200);
});

$('#mainNav nav ul li').mouseleave(function(){
    $(this).children('ul').stop().slideUp(50);
});

我建议slideUp的速度比slideDown更快。

如果由于某种原因它仍然无效，请尝试添加.stop(true)或.stop(true, true)，像这样的东西：

$('#mainNav nav ul li').mouseenter(function(){
    $(this).children('ul').stop(true, true).slideDown(200);
});

$('#mainNav nav ul li').mouseleave(function(){
    $(this).children('ul').stop(true, true).slideUp(200);
});

True参数用于清除所有排队的动画。

在命令结尾处也不要忘记;。

Answer 2

don't use slideup when mouse out. just hide(); its working fine. example.

**on mouse over:**
--------------------------------------
$("#btnmenu").hover(function(){
   $("#menu").slideDown();
}); 


**on mouse out** 
--------------------------------------
$("#btnmenu").mouseout(function(){
    $("#menu").hide();
});

下拉菜单使用jQuery slideDown

2 个答案: