2

ネストされたメニューで作業しています。マウスをオプションの上に移動すると、サブリストが表示されます。これが私のホバー機能です：

$( ".sublist" ).parent().hover( function () {
    $(this).toggleClass("li_hover",300); //use to change the background color
    $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});

ここで、サブリストが表示される前に短い期間を追加して、クレイジーなマウスがユーザーから移動するのを防ぎます。誰かがこれについて良い提案をしていますか?

アップデート：

みなさん、ありがとうございます。プログラムを少し変更しました。最近は次のようになります。

function doSomething_hover (ele) {
    ele.toggleClass("li_hover",300);
    ele.find(".sublist").toggle("slide", {}, 500);
}

$(function () {
    $( ".sublist" ).parent().hover( function () {
        setTimeout(doSomething_hover($(this)), 3000);
    });
}):

setTimeout が何も遅延しないのは奇妙です。しかし、関数呼び出しをdoSomething_hover("()" なしで) に変更すると、関数の遅延が大きくなります。しかし、私はjquery要素を関数に渡すことができないので、まだ機能しませdoSomething_hover($(this))んsetTimeout。

更新 2: setTimeout の作業が完了しましたが、それは私が望むものではないようです: 私が正確に望んでいるのは、マウスが 0.5 秒未満のオプションにホバーした場合、何も起こらないことです。

とにかく、これが私がsetTimeoutを機能させるコードです:

function doSomething_hover (ele) {
    ele.toggleClass("li_hover",300);
    ele.find(".sublist").toggle("slide", {}, 500);
}

$(function () {
    $( ".sublist" ).parent().hover( function () {
        var e = $(this);
        setTimeout(function () { doSomething_hover(e); }, 1000);
    });
}):

最終更新: マウスを離したときに clearTimeout を使用して、この作業を行いました。したがって、コードは次のようになります。

    $( ".sublist" ).parent().mouseover( function () {
        var e = $(this);
        this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
    });

    $( ".sublist" ).parent().mouseout ( function () {
        if(this.timer){
            clearTimeout(this.timer);
        }
        if($(this).hasClass("li_hover")){
            $(this).toggleClass("li_hover");
        }
        $(this).find(".sublist").hide("slide", {}, 500);

    });

これは の部分$(document).ready()です。その他のコードは上記と同じです。

真。最終更新:マウスをサブリストに移動すると、親のイベントが発生し、サブリストが非表示になるmouseoverため、バグが発生することがあります。関数を使用して問題を解決できます。mouseoutmouseoverhover

    $( ".sublist" ).parent().hover( 
        function () {
            var e = $(this);
            this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
        },
        function () {
            if(this.timer){
                clearTimeout(this.timer);
            }
            $(this).find(".sublist").hide("slide", {}, 500);
            if($(this).hasClass("li_hover")){
                $(this).toggleClass("li_hover",300);
            }
        }
    );

皆さんありがとう

4

3 に答える 3

2 
timeout = setTimeout('timeout_trigger()', 3000);
clearTimeout(timeout);

jQuery(document).ready(function () {
//hide a div after 3 seconds
setTimeout( "jQuery('#div').hide();",3000 );
});

リンクを参照 

function hover () {
$( ".sublist" ).parent().hover( function () {
$(this).toggleClass("li_hover",300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
}
setTimeout( hover,3000 );

....

于 2012-11-08T09:02:02.727 に答える
2

これを試してください：

コード

setInterval(doSomthing_hover, 1000);


function doSomthing_hover() {
    $(".sublist").parent().hover(function() {

        $(this).toggleClass("li_hover", 300); //use to change the background color
        $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
    });

}​

SetTime と setInterval

基本的なレベルで、JavaScript タイマーがどのように機能するかを理解することが重要です。多くの場合、それらは単一のスレッドにあるため、直感的に動作しません。まず、タイマーを構築および操作できる、アクセスできる 3 つの関数を調べることから始めましょう。

var id = setTimeout(fn, delay);- 遅延後に指定された関数を呼び出す単一のタイマーを開始します。この関数は、後でタイマーをキャンセルできる一意の ID を返します。

var id = setInterval(fn, delay);- setTimeout に似ていますが、キャンセルされるまで関数を (毎回遅延して) 継続的に呼び出します。

clearInterval(id);, clearTimeout(id);- タイマー ID (前述の関数のいずれかによって返される) を受け入れ、タイマー コールバックの発生を停止します。

タイマーが内部でどのように機能するかを理解するために、検討する必要がある重要な概念が 1 つあります。タイマーの遅延は保証されていません。ブラウザー内のすべての JavaScript は単一のスレッドで実行されるため、非同期イベント (マウス クリックやタイマーなど) は、実行に空きがある場合にのみ実行されます。

これをさらに読んでください： http://ejohn.org/blog/how-javascript-timers-work/

于 2012-11-08T09:02:57.717 に答える
1

あなたが使うことができます.setTimeout

$(".sublist").parent().hover(function() {
    setTimeout(function() {
        $(this).toggleClass("li_hover", 300); //use to change the background color
        $(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
    }, 1000);
});​
于 2012-11-08T08:58:28.793 に答える