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 が 2 つ後に非表示になることです。秒。

これは事件です。マウスが黄色の div から出た直後に黒い div の上に移動した場合、マウスが黒い div 上にある限り、黒い div は隠れません。これも起こっています。

次のステップを説明するのは少し難しいですが、試してみます。マウスが黄色の div の上に移動し、黒い div が出てきたら、マウスを黒い div の上に移動し、2 秒以内にマウスがそこから移動した場合 (黒い div)、アニメーション全体混乱します。その動作は逆です。しかし、マウスが 2 秒以上黒の div に置かれたままになっている場合、それを外に出すと、スクリプト全体が正常に実行されます。

これは、よりよく説明するためのリンクです。http://jsfiddle.net/HAQyK/381/

4

3 に答える 3

1

slideToggle() を適切な slideUp() および slideDown() 呼び出しに置き換えてみてください。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 に答える
1

あなたの問題は、タイムアウト機能が重複しているため、slideToggleが2回連続して発火することです。タイムアウトまたは間隔を処理する最もクリーンな方法は、それらを変数に格納して、不要なときにそれらを削除する制御を提供することです。

// 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を追加することを怠りました。現在正しい更新された jsFiddle を参照してください: http://jsfiddle.net/HAQyK/390/

スクリプトにアプローチするもう 1 つの方法は、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 に答える