JQuery的：悬停功能，如何添加延迟

Question

我有一些JQuery的弹出一个jQuery的对话框，当你将鼠标悬停在图像像这样（http://docs.jquery.com/UI/Dialog）箱：

$(document).ready(function() { 
     $("img").hover(function() { 

      $("#dialog").dialog(); 
     }); 
    }); 

我有2个问题 1。当我关闭对话框，然后将鼠标悬停在图像上时，对话框不会再出现，我该如何解决这个问题 1.如果用户将鼠标悬停在图像上几秒钟，我该如何弹出该框

Answer 1

1 - 您需要首先初始化对话框。 Code here

$(document).ready(function() { 
    $("#dialog").dialog({ autoOpen: false }); // init without showing 

    $("img").bind("mouseover", function() { 
    $("#dialog").dialog('open'); // open the dialog 
    }); 

}); 

2 - 只使用一个计数器

var _counter = 0; 
var _seconds = 0; 

$("img").hover(function() { 
    // mouseover 
    _counter = setInterval(openDialogNow(), 1000); 
}, function() { 
    // mouseout 
    clearInterval(_counter); 
}); 

function openDialogNow() { 
    // this function will run every second while the user does not mouseout the image 
    _seconds++; // add 1 to the global variable 

    if(_seconds == 3) { // will open in 3 seconds, 3 * 1000 miliseconds 
     _seconds = 0; // reset, so we can reuse later 
     $("#dialog").dialog('open'); // open the dialog 
    } 
} 

Answer 2

1）使用鼠标悬停/鼠标移开或的mouseenter /鼠标离开事件。

2）看看这个：http://cherne.net/brian/resources/jquery.hoverIntent.html。我在几个地方使用过，它可以很好的定制悬停。它还负责处理重点1捕捉自己的事件。

Answer 3

使用jQuery .delay（）方法。

http://api.jquery.com/delay/