Question

我有一个用于显示照片和描述的fancybox。现在它在mouseenter事件上打开fancybox。它与此代码完美配合：

$('.fancy_link').live('mouseenter', mouseEnter);
function mouseEnter()
{
jQuery(this).fancybox().trigger('click');
return false;
}

但我需要设置延迟打开fancybox。它应该如何工作：用户将光标移动到链接上，1秒后将打开fancybox并显示内容。如果用户在等待1秒之前将鼠标移开，则不应打开fancybox。

我尝试过JQuery delay（）和setTimeout（），但两者都无法正常工作。 1秒。两种方法都忽略了延迟。

Answer 1

试试这个解决方案：

var timer = null;
$('.fancy_link').on('mouseenter', function() {
    timer = setTimeout(mouseEnter, 1000);
});
// clear timer when mouse leaves
$('.fancy_link').on('mouseleave', function() {
    clearTimeout(timer);
});

Answer 2

这可以帮到你

function openFancybox() {
    setTimeout( function() {$('#fancy_link').trigger('click'); },1000);
}

Answer 3

我想你需要使用setTimeout和clearTimeout

这些方面的东西：

var timer;

$('.fancy_link').mouseenter(function(){
    var $this = $(this);
    timer = setTimeout(function(){
        $this.fancybox().trigger('click');
    }, 1000);
}).mouseleave(function(){
    clearTimeout(timer);
});

Answer 4

使用setTimeout / clearTimeout ...

//binding code...
$('.fancy_link').on('mouseenter',mouseEnter);
$('.fancy_link').on('mouseleave', mouseLeave);

//run when the mouse hovers over the item
function mouseEnter() {
  //clear any previous timer
  clearTimeout($(this).data('h_hover'));

  //get a reference to the current item, for the setTimeout callback
  var that = this;

  //set a timer, and save the reference to g_hover
  var h_hover = setTimeout(function(){
    //timer timed out - click the item being hovered
    $(that).click();
  }, 1000);

  //save the reference - attached to the item - for clearing
  //  data is a generic "store", it isn't saved to the tag in the dom.
  //  note: if you have a data-* attribute it is readable via data()
  $(this).data('h_hover',h_hover)
}

//handler for when the mouse leaves the item
function mouseLeave() {
  //clear the previously set timeout
  clearTimeout($(this).data('h_hover'));
}

JQuery Fancybox开放延迟

4 个答案: