Question

HTML代码：

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

JavaScript的：

var hoverVariable=false;
var hoverVariable2=false;

$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
    hoverVariable2=true;
    $('#slickbox').slideToggle(600);
    return false;
})
$('#slick-slidetoggle').mouseleave(function() {
    hoverVariable2=false;
    setTimeout(function (){
    if(!hoverVariable && !hoverVariable2){
    $('#slickbox').slideToggle(600);
    return false;}
    }, 1000);
})
$('#slickbox').mouseleave(function() {                    
    hoverVariable=false;
    setTimeout(function (){
    if(!hoverVariable && !hoverVariable2){                    
    $('#slickbox').slideToggle(600);
    return false;}
    return false;
    }, 1000); 
})
$('#slickbox').mouseover(function() {
        hoverVariable2=false;

    hoverVariable=true;

})

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上保持两秒以上然后它被移出，则整个脚本运行正常。

这是更好解释的链接。 http://jsfiddle.net/HAQyK/381/

Answer 1

你的问题似乎是因为你的重复超时功能，slideToggle在快速连续触发两次。处理超时或间隔的最简洁方法是将它们存储在变量中，以便在不需要时控制删除它们：

// 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而不是Toggle。查看现在正确的更新的jsFiddle：http://jsfiddle.net/HAQyK/390/

您可以使用jQuerys延迟函数和动态stop();方法的另一种方法。将div包装在一个容器中，你有一个更简单的代码块：

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

请在此处查看：http://jsfiddle.net/HAQyK/387/

Answer 2

尝试使用适当的slideUp（）和slideDown（）调用替换slideToggle（）。 http://jsfiddle.net/tppiotrowski/HAQyK/386/

var hoverVariable = false;
var hoverVariable2 = false;

$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
    hoverVariable2 = true;
    $('#slickbox').slideDown(600);
    return false;
})
$('#slick-slidetoggle').mouseleave(function() {
    hoverVariable2 = false;
    setTimeout(function() {
        if (!hoverVariable && !hoverVariable2) {
            $('#slickbox').slideUp(600);
            return false;
        }
    }, 1000);
})
$('#slickbox').mouseleave(function() {
    hoverVariable = false;
    setTimeout(function() {
        if (!hoverVariable && !hoverVariable2) {
            $('#slickbox').slideUp(600);
            return false;
        }
        return false;
    }, 1000);
})
$('#slickbox').mouseover(function() {
    hoverVariable2 = false;
    hoverVariable = true;
})

Answer 3

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

        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();
        });

按钮隐藏不正常

3 个答案: