1

ユーザーが画像にカーソルを合わせてからちょうど3秒後にjQueryダイアログを表示したいと思います。現在私は持っています：

$(".imgLi").live('hover', function() {
    showDialog();
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>

タイムコードをどこに置くか、jQueryのタイマーオブジェクトをここに実装する方法がわかりません。その3秒間のいずれかの時点で「マウスを離す」（マウスを画像から離す）を使用する場合、ダイアログを表示したくありません。ここで助けてくれてありがとう。

4

4 に答える 4

4

申し訳ありませんが、mouseoutにcleartimeoutを追加したので、ユーザーがマウスを離しても実行されません。

$(document).on('mouseenter', ".imgLi", function() {
    var t=setTimeout("showDialog()",3000);
}).on('mouseleave', ".imgLi", function() {
    clearTimeout(t);
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>
于 2012-04-20T01:27:39.753 に答える
1 
$(".imgLi").live({
        mouseenter:
           function()
           {
              window.myTimeout = setTimeout(showDialog,3000);
           },
        mouseleave:
           function()
           {
              clearTimeout(window.myTimeout);
           }
       }
    );

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

単純なjsfiddle：http: //jsfiddle.net/weCpE/

于 2012-04-20T01:35:03.183 に答える
1

3秒のホバー後にダイアログを表示できます。ユーザーが3秒前にマウスを離すと、このタイプのコードを使用してもダイアログは表示されません。

また、jQueryのすべてのバージョンで非推奨になっている.on()ため、使用するコードを移行しました。このコードでは、パフォーマンスを向上させるために、オブジェクトに近い静的な親要素に.live()置き換える必要があります。document".imgLi"

var dialogTimer = null;
$(document).on('mouseenter', ".imgLi", function() {
    if (!dialogTimer) {
        dialogTimer = setTimeout(function() {
             dialogTimer = null;
             showDialog();
        }, 3000);
    }
}).on('mouseleave', ".imgLi", function() {
    if (dialogTimer) {
        clearTimeout(dialogTimer);
        dialogTimer = null;
    }
});

function showDialog()
{
    $('#imageDialogDiv').dialog({
        modal:true
    });
}

<div id="imageDialogDiv" title="Blah">...</div>
于 2012-04-20T01:35:03.617 に答える
0

Brian CherneのHoverIntentプラグインを使用したところ、優れた結果が得られました。必要な正確な遅延に簡単に構成できます。私はそれがうまくいくとは思いません.live（この質問を参照してください）。

于 2012-04-20T02:10:04.380 に答える