Question

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

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

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

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

Answer 1

1）使用mouseover / mouseout或mouseenter / mouseleave事件。

2）看看这个：http://cherne.net/brian/resources/jquery.hoverIntent.html。我已经在几个地方使用它，它允许非常好的自定义悬停。它还会处理第1点捕捉自己的事件。

Answer 2

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 3

使用jQuery .delay（）方法。

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

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

3 个答案: