1

.logoホバーしてからslideDown/slideUpにしようとしましたが.nav_b、マウスが移動し続けると、.nav_bまだ表示されます。

これらのコードは問題なく動作しますが、マウスを .logo から.nav_bそこに移動するとステートメントが起動し.logo mouseoutます。
フラグを設定する方法または..からマウスを起動moveoutする.logoか.nav_bどうか? なにか提案を？ありがとう！

http://jsfiddle.net/6URAb/

$('.logo').hover(function(){
    $('.nav_b').stop(true, true).slideDown({duration: 200, queue: false});
},function(){
    $('.nav_b').stop(true, true).slideUp({duration: 200, queue: false});
});

$('.nav_b').hover(function(){
    $('.nav_b').stop(true, true).show();
},function(){
    $('.nav_b').stop(true, true).slideUp({duration: 200, queue: false});
});
4

1 に答える 1

1

最も簡単な方法は、マークアップを変更し、ホバー イベントを.head要素 Javascriptにアタッチすることです。

$(function () {

    $('.head').hover(function () {
        $('.nav_b').stop(true, true).slideDown({
            duration: 200,
            queue: false
        });
    }, function () {
        $('.nav_b').stop(true, true).slideUp({
            duration: 200,
            queue: false
        });
    });
});

HTML

<div class="head">
    <div class="logo">logo</div>
    <div class="nav_b">
        <div class="search">search</div>
    </div>
</div>

フィドルをチェック

編集

それを実現したい場合は、同じ marup で、setTimeoutとcleartimeoutの組み合わせを使用する必要があります。このようなもの

$(function () {
    var TIME_OUT;
    $('.logo').hover(function () {
        if (TIME_OUT) clearTimeout(TIME_OUT);
        $('.nav_b').stop(true, true).slideDown({
            duration: 200,
            queue: false
        });
    }, function () {
        $('.nav_b').stop(true, true).slideUp({
            duration: 200,
            queue: false
        });
    });

    $('.nav_b').hover(function () {
        $('.nav_b').stop(true, true).show();
    }, function () {
        TIME_OUT = setTimeout(function () {
            $('.nav_b').stop(true, true).slideUp({
                duration: 200,
                queue: false
            });
        }, 250);
    });
});

更新されたフィドル

于 2013-06-01T23:02:41.767 に答える