javascript - 隐藏按钮无法正常工作

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

尝试用适当的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;
})​