0

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/

4

3 回答 3

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/

于 2012-11-20T10:55:29.990 回答
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;
})​
于 2012-11-20T11:12:58.743 回答
1

我重新编码了一个解决方案。在这里检查小提琴

        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();
        });
于 2012-11-20T11:30:47.410 回答