jQueryダイアログを表示する前に待機するには？

Question

私はjQueryのダイアログを、ユーザーがイメージの上に置いた直後に正確に3秒間表示するようにしたいと思います。現在、私は：

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

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

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

ここにタイムコードを置くか、またはjQueryのタイマオブジェクトをどのように実装するかはわかりません。その3秒の時間枠のどの時点でも、マウスを画像から離して移動すると、は表示されません。ここに助けてくれてありがとう。あなたは3秒後にダイアログを表示することができますhttp://jsfiddle.net/weCpE/

Answer 1

申し訳ありませんが、私は、マウスアウトでてclearTimeoutを追加しました3秒前にユーザーがマウスを離すと、このタイプのコードを使用して表示されません。

.on()を使用するようにコードを移行しました。.live()はすべてのバージョンのjQueryで非推奨になっているためです。このコードの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> 

Answer 2

$(".imgLi").live({ 
     mouseenter: 
      function() 
      { 
       window.myTimeout = setTimeout(showDialog,3000); 
      }, 
     mouseleave: 
      function() 
      { 
       clearTimeout(window.myTimeout); 
      } 
     } 
    ); 

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

シンプルjsfiddleを離れてマウスを置いた場合、それが実行されない必要がありますので、

Answer 3

：ユーザーが

$(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> 

Answer 4

私は優秀な成績でブライアンCherneからHoverIntentプラグインを使用してきました - あなたは簡単にあなたが望む正確な遅延にそれを設定することができます。私はそれが.live（this question参照）で動作するとは思わない。