1

私はこれにあまり熟練していませんが、ホバーすると、検索フォームのあるdivが下にスライドするナビゲーションアイテムがあります。現在、マウスオーバーしてからマウスアウトすると、閉じるボタンをクリックするまでdivは開いたままになります。

ユーザーがまだdivまたはnavリンクを使用している（つまり、検索フォームに入力している）場合を除いて、数秒後にdivスライドのバックアップをマウスアウトしたときにバックアップできるようにしようとしています。

これが私がこれまでに持っているものです：

$("#services_link").mouseover(function() {
        $("#services_link").css('background-position','left -73px');
        $("#vendors_dropdown").slideDown(function() {
            setTimeout(HideMe, 4000);
        });
    });

    function HideMe() {
        $("#services_link").css('background-position','left 0');
        $("#vendors_dropdown").slideUp();
    }

これにより、divがリンクのホバーで下にスライドし、4秒後に上にスライドするのと同じくらいvarになります（マウスカーソルがどこにあるかに関係なく）。したがって、マウスカーソルがリンクまたはdivにある場合は、divを開いたままにする必要があります。

私は他の3つまたは4つの同様の質問（および回答）を見てきましたが、実際にはどれもうまくいきません。setTimeout（およびclearTimeout）は私にとってはちょっと新しいので、noobの質問を許してください。:)

4

1 に答える 1

1

mouseenterとmouseleaveの両方をバインドします。mouseleaveでタイムアウトを実行する必要がありますが、mouseenterが再度発生した場合はリセットします。

ここで選択した回答だけを見て、私が話していることを実行する方法を確認してください。

このようなもの：

var timeout;
$("#services_link, #vendors_dropdown").mouseenter(function() {
    window.clearTimeout(timeout);
    $("#services_link").css('background-position','left -73px');
    $("#vendors_dropdown").slideDown();
}).mouseleave(function(){
    timeout = window.setTimeout(HideMe, 4000);
});

function HideMe() {
    $("#services_link").css('background-position','left 0');
    $("#vendors_dropdown").slideUp();
}
于 2013-03-19T01:44:19.200 に答える