Jquery .on（ "mouseenter"） - 2秒待ってからアクションを実行します。

divにカーソルを置いたときに隠れたテキストを表示するスクリプトがあります。しかし、私はそれを2秒遅らせたいと思っています。ユーザーが2秒前にマウスを動かすと、何も表示されません。Jquery .on（ "mouseenter"） - 2秒待ってからアクションを実行します。

どうすればよいですか？私が持っているもの

：http://jsfiddle.net/ZhrJT/

HTML：

<body> 
    <div>hover this</div> 
    <p class="hidden">unhidden!!</p> 
</body>

JS：

$("body").on("mouseenter", "div", function(){ 
    $("p").removeClass("hidden"); 
}).on("mouseleave", "div", function(){ 
    $("p").addClass("hidden"); 
});

CSSは：

div { 
    background-color:red; 
    height:100px; 
} 

p.hidden { 
    display:none; 
} 

p { 
    background-color:yellow; 
    height:100px; 
}

があり

出典

2012-01-26 supercoolville

http://cherne.net/brian/resources/jquery.hoverIntent.html !!!!!!!!私 – PeeHaa

var timer; 
$("body").on("mouseenter", "div", function(){ 
    timer = setTimeout(function() { 
     $("p").removeClass("hidden"); 
    }, 2000); 
}).on("mouseleave", "div", function(){ 
    clearTimeout(timer); 
    $("p").addClass("hidden"); 
});

yaは行く、それは簡単なことです。実行時に要素を非表示にするタイムアウトを設定し、ユーザーがmouseleave要素の場合はタイムアウトをキャンセルします。

出典

2012-01-26 20:51:38 Jasper

1探しているものかもしれません!!!!!!!!!!!!!!! –

感謝を打つためにあなたが – supercoolville

あなたはすごく素敵です...素敵な仕事...私と同じように見えました:) –

setTimeout/clearTimeoutを使用してください。このような何か：

$("body").on("mouseenter", "div", function(){ 
    $(this).data('timeout', setTimeout(function(){ 
     $("p").removeClass("hidden"); 
    }, 2000)); 
}).on("mouseleave", "div", function(){ 
    clearTimeout($(this).data('timeout')); 
    $("p").addClass("hidden"); 
});

出典

2012-01-26 20:52:20

Jquery .on（ "mouseenter"） - 2秒待ってからアクションを実行します。

答えて

関連する問題