Javascript 按钮隐藏功能不正常

HTML代码：

<div id="slick-slidetoggle">wxyz</div>           
<div id="slickbox" >abcd</div>​

CSS代码：

#slickbox {
    background: black;
    width:100px;
    height: 135px;
    display: none; 
    cursor:pointer;
    color:white;
}
#slick-slidetoggle{
 background: yellow;
    width:100px;
    height: 135px;
    cursor:pointer;
    color:black;

}
​

现在需要的行为是，当鼠标滑过黄色div（“wxyz”）时，黑色div（“abcd”）应向下滑动，如果鼠标移出黄色而未移动到黑色div，则黑色div应在两秒钟后隐藏

这正在发生。如果在移出黄色div后立即将鼠标移到黑色div上，则只要鼠标在黑色div上，黑色div就不应隐藏。这种情况也会发生

接下来的步骤有点难以解释，但我会尝试，当鼠标移动到黄色div上，黑色div出来，然后鼠标移动到黑色div上，如果在两秒钟内移动到黑色div上（黑色div），那么整个动画就会失控。它的行为是相反的。但如果鼠标在black div上保持两秒钟以上，然后将其移出，则整个脚本运行正常

---

这是更好地解释的链接

您的问题似乎是，由于重复的超时功能，滑动切换快速连续触发两次。处理超时或间隔的最干净方法是将它们存储在变量中，以便在不需要时控制删除它们：

// Defined in global scope
var timer;

$('#slick-slidetoggle').mouseleave(function() {
    hoverVariable2=false;
    // Timer set as function
    timer = setTimeout(function (){
    if(!hoverVariable && !hoverVariable2){
        $('#slickbox').slideToggle(600);
        // Timer no longer need and so cleared
        clearTimeout(timer);
    return false;}
 }, 1000);
});

编辑：忽略了添加slideUp/slideDown，而不是按照上面的正确答案切换。请参阅更新后的JSFIDLE，它现在是正确的：

处理脚本的另一种方法是使用jQuerys delay function和

stop（）动画的方法。将div包装在一个容器中，您将得到一个简单得多的代码块：

$('#slick-container').mouseenter(function() {
    $('#slickbox').stop().slideDown(600);
}).mouseleave(function(){        
    $('#slickbox').stop().delay(1000).slideUp(600);
});

请在此处查看：
您的问题似乎是由于重复的超时功能，滑块在快速连续触发两次时切换。处理超时或间隔的最干净方法是将它们存储在变量中，以便在不需要时控制删除它们：

// Defined in global scope
var timer;

$('#slick-slidetoggle').mouseleave(function() {
    hoverVariable2=false;
    // Timer set as function
    timer = setTimeout(function (){
    if(!hoverVariable && !hoverVariable2){
        $('#slickbox').slideToggle(600);
        // Timer no longer need and so cleared
        clearTimeout(timer);
    return false;}
 }, 1000);
});

编辑：忽略了添加slideUp/slideDown，而不是按照上面的正确答案切换。请参阅更新后的JSFIDLE，它现在是正确的：

处理脚本的另一种方法是使用jQuerys delay function和
stop（）动画的方法。将div包装在一个容器中，您将得到一个简单得多的代码块：

$('#slick-container').mouseenter(function() {
    $('#slickbox').stop().slideDown(600);
}).mouseleave(function(){        
    $('#slickbox').stop().delay(1000).slideUp(600);
});

请在此处查看：
尝试使用适当的slideUp（）和slideDown（）调用替换slideToggle（）

尝试用适当的slideUp（）和slideDown（）调用替换slideToggle（）

我重新编写了一个解决方案。检查小提琴

我重新编写了一个解决方案。检查小提琴

谢谢这个解决方案太棒了。谢谢这个解决方案太棒了。非常感谢你的帮助。我很感激。根据所需的行为，您的代码工作得非常好，但我有一个疑问，当鼠标离开黄色div并进入黑色div并立即离开黑色div时，两个函数的mouseleave都会被调用，在这两个函数中，if（！hoverVariable1&！hovervariable2）条件满足并调用它slidetoggle（）。但在您的代码中，它只执行一次。我不明白怎么做。当我直接从黑色重新输入黄色时，有一个小故障。我应该通知你。如果你把鼠标悬停在黑色方块上，然后重新进入黄色方块，黑色方块就会向上滑动。非常感谢你的帮助。我很感激。根据所需的行为，您的代码工作得非常好，但我有一个疑问，当鼠标离开黄色div并进入黑色div并立即离开黑色div时，两个函数的mouseleave都会被调用，在这两个函数中，if（！hoverVariable1&！hovervariable2）条件满足并调用它slidetoggle（）。但在您的代码中，它只执行一次。我不明白怎么做。当我直接从黑色重新输入黄色时，有一个小故障。我应该通知你。如果你把鼠标悬停在黑色方块上，然后重新进入黄色方块，黑色方块就会向上滑动。非常感谢你的帮助。我很感激。@Kapilchattani不客气。我的解决方案处理动画发生时悬停在元素上的情况。您可能想看看jQuery stop（）方法。如果你快速地在黄色的广场上来回徘徊，你就会明白我的意思：）哦，是的，它就是这样。对于长菜单，这可能会派上用场。谢谢你让我知道。非常感谢你的帮助。我很感激。@Kapilchattani不客气。我的解决方案处理动画发生时悬停在元素上的情况。您可能想看看jQuery stop（）方法。如果你快速地在黄色的广场上来回徘徊，你就会明白我的意思：）哦，是的，它就是这样。对于长菜单，这可能会派上用场。谢谢你让我知道。
        var hideB;
        var $black = $('#slickbox');
        var $yellow = $('#slick-slidetoggle');

        function showBlack() {
            if( hideB ) window.clearTimeout( hideB );
            $black.stop( true, true );
            $black.slideDown(600);
        }

        function hideBlack() { 
            hideB = setTimeout( function( ) {
                $black.stop( true, true );
                $black.slideUp( 600 ); }
                , 1000 );
        }

        $black.hide();

        $yellow.mouseenter(function() {
            showBlack();
        })

        $yellow.mouseleave(function() {
            hideBlack();
        });

        $black.mouseleave( function( ) {
            hideBlack();
        });

        $black.mouseenter( function( ) {
            showBlack();
        });