web-dev-qa-db-ja.com

2秒以上マウスを置いた場合、それ以外の場合は表示しませんか？

これは、ボタンを下にスライドするためにホバー時のdivに適用したjQueryスライド関数です。

これは正常に機能しますが、誰かが移動したり移動したりするたびに、上下に動き続けます。

私はそれに1秒か2秒の遅延タイマーを置くなら、それはもっと理にかなっていると思いました。

ユーザーが1〜2秒以上divにいる場合にのみ、スライドダウンを実行するように関数を変更するにはどうすればよいですか。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>
<script type="text/javascript">

$("#NewsStrip").hover(
function () {
    $("#SeeAllEvents").slideDown('slow');    },
function () {
    $("#SeeAllEvents").slideUp('slow');
});

</script>
jqueryhtmlcsstimerslidedown
27
user1266515

マウスオーバー時にタイマーを設定し、スライドがアクティブになったとき、またはマウスアウトしたときに、どちらか早い方のタイミングでタイマーをクリアする必要があります。

var timeoutId;
$("#NewsStrip").hover(function() {
    if (!timeoutId) {
        timeoutId = window.setTimeout(function() {
            timeoutId = null; // EDIT: added this line
            $("#SeeAllEvents").slideDown('slow');
       }, 2000);
    }
},
function () {
    if (timeoutId) {
        window.clearTimeout(timeoutId);
        timeoutId = null;
    }
    else {
       $("#SeeAllEvents").slideUp('slow');
    }
});

実際に見る

60
Jon
var time_id;

$("#NewsStrip").hover(
function () {
    if (time_id) {
        clearTimeout(time_id);
    } 
    time_id = setTimeout(function () {
        $("#SeeAllEvents").stop(true, true).slideDown('slow');
    }, 2000);
}, function () {
    if (time_id) {
        clearTimeout(time_id);
    } 
    time_id = setTimeout(function () {
        $("#SeeAllEvents").stop(true, true).slideUp('slow');
    }, 2000);
});
4
xdazz