8

いくつかの「トリガー」( <li>s) のリストがあり、各トリガーには特定の DIV が表示され、各 DIV には「閉じる」ボタンがあります。

ここで、開いた/表示されている DIV にタイマー/遅延を追加して、ユーザーがマウスをトリガーから離してから 3 秒または 5 秒後に、開いた/表示されている DIV がフェードアウトするようにすることで、使いやすさを改善したいと考えています。

私が今抱えている問題は、.mouseleave() を使用して関数を追加するたびに、マウスがトリガー領域を離れるとすぐに、開いている/表示されている DIV が非表示になることです。

ただし、関数を削除すると、DIV は表示されたままになり、閉じるボタンをクリックして閉じることができます。

これが私の状況のフィドル/デモです。

どんな助けでも大歓迎です。

ありがとう。

4

3 に答える 3

10

@locrizakの答えは正しい（+1）。これは、.delay()デフォルトでエフェクトキューが設定されているが、.hide()パラメーターがないと、選択した要素がエフェクトなしで非表示になるため、エフェクトキューはまったく関与しません。

アニメーションなしで非表示にする場合は、次を使用しますsetTimeout。

$('.trigger').mouseleave(function() {
    setTimeout(function () {
        $('.copy .wrapper').hide();
    }, 3000);
});

http://jsfiddle.net/mattball/93F3k/

最後の編集、私は約束します

//Show-Hide divs
var current;
$('.trigger').live('mouseenter', function() {    
    var id = current = $(this).data('code');
    $('#' + id).show().siblings().fadeOut();
}).live('mouseleave', function() {
    var id = $(this).data('code');
    current = null;
    setTimeout(function ()
    {
        if (current !== id) $('#' + id).hide(1);
    }, 3000);
});

//Close button
$('.copy .wrapper span').live('click', function() {
    $(this).closest('.wrapper').stop(true, true).fadeOut();
});

デモ： http： //jsfiddle.net/mattball/b2ew5/

于 2011-06-06T17:42:22.803 に答える
3

setTimeoutの代わりに使用してくださいdelay。

作業デモ： http： //jsfiddle.net/J7qTy/

jQueryの遅延ドキュメントから：

.delay（）メソッドは、キューに入れられたjQueryエフェクト間の遅延に最適です。制限があるため（たとえば、遅延をキャンセルする方法はありません）、.delay（）はJavaScriptのネイティブsetTimeout関数の代わりにはなりません。これは、特定のユースケースに適している場合があります。

于 2011-06-06T17:45:24.867 に答える
3

非表示の期間が必要です。

$('.copy .wrapper').delay(3000).hide('fast');

ドキュメントhttp://api.jquery.com/delay/を見ることができます

アップデート

これはあなたが探しているものですか？

$('.trigger').bind("mouseenter" , function() {    
    var id = $(this).attr("data-code"); // Get the data from the hovered element
    $('.copy .wrapper:visible').fadeOut();
    $('#' + id).stop(true, true).show(); // Toggle the correct div    
    //Close button
    $('.copy .wrapper span').click(function() {
        $('.copy .wrapper').fadeOut();
    });
});

それはmouseleaveリスナーを取り除くことです

于 2011-06-06T17:38:05.597 に答える