悬停时的 JQuery 下拉菜单

Question

我有一个包含多个链接的菜单，悬停时下拉菜单会向下滑动。每个链接都有自己的下拉菜单。我的问题是，当您通过将鼠标移入和移出悬停大小来调用大量事件时，即使您停止悬停，它也会不断上下滑动。

setInterval(function(){

    if($("header nav ul li.product:hover").length != 0){
        $("header .dropdown-support").slideUp("slow", function(){
            alert();
            $("header .dropdown-product").slideDown(500);
        });
        $("header .dropdown-store").slideUp(500, function(){
            $("header .dropdown-product").slideDown(500);
        });
    }
    else{
        if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){
            $("header .dropdown-product").slideUp();
        }
    }

    if($("header nav ul li.support:hover").length != 0){
        $("header .dropdown-product").slideUp(500, function(){
            $("header .dropdown-support").slideDown(500);
        });
        $("header .dropdown-store").slideUp(500, function(){
            $("header .dropdown-support").slideDown(500);
        });
    }
    else{
        if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){
            $("header .dropdown-support").slideUp();
        }
    }

    if($("header nav ul li.store:hover").length != 0){
        $("header .dropdown-product").slideUp(500, function(){
            $("header .dropdown-store").slideDown();
        });
        $("header .dropdown-support").slideUp(500, function(){
            $("header .dropdown-store").slideDown();
        });
    }
    else{
        if($("header .menu-dropdown:hover").length == 0 && $("header nav ul:hover").length == 0){
            $("header .dropdown-store").slideUp();
        }
    }
}, 500);

类似于这个 jsfiddle：http://jsfiddle.net/amkrtchyan/4jxph/2/

任何人都知道我该如何实现这一目标？谢谢

Answer 1

使用jquery.stop()函数：

$("header .dropdown-support").stop().slideUp(500, function(){
    $("header .dropdown-store").stop().slideDown();
});

希望这会有所帮助...