3

ページにアイコンがあり、500 ミリ秒の遅延の後、接続ボックスに詳細が表示されます。

http://jsfiddle.net/qSe6t/1/f

次に、アイコンとポップアップの両方からマウスアウトすると、500ms の遅延の後、ポップアップが非表示になります。

私が抱えている問題は、その 500ms の遅延中にカーソルがアイコン/ポップアップに再入力されることです。

これがコードです...

<div id="accountIcon">
    <div id="accountPopup"></div>
</div>

CSS:

#accountIcon {
    position:relative;
    height:58px;
    width:80px;
    cursor:pointer;
    background-color:#000;
}
#accountPopup {
    position:absolute;
    top:58px;
    width:400px;
    height:200px;
    background-color:#CCC;
    display:none;
}

jQuery:

$("#accountIcon").hover(function () {
    $("#accountPopup").delay(500).show(0);
}, function () {
    $("#accountPopup").delay(500).hide(0);
});
4

2 に答える 2

6

その要素の現在のすべてのタイマー/イベントを停止するには、 jquery .stop(true, true) が必要です。

私はあなたのフィドルをフォークしました

http://jsfiddle.net/qSe6t/3/

$("#accountPopup").stop(true,true).delay(500).hide(0);
于 2013-06-07T12:34:22.463 に答える
3 
var timeout;
$("#accountIcon").hover(function () {
    clearTimeout(timeout);
    $("#accountPopup").delay(500).show(0);
}, function () {
    timeout = setTimeout(function(){
      $("#accountPopup").delay(500).hide(0);
    },500);
});

デモ---> http://jsfiddle.net/qSe6t/2/

于 2013-06-07T12:33:13.320 に答える