javascript - JQuery Fancybox 打开延迟

Question

我有一个花哨的盒子来显示照片和它们的描述。现在它在 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'));
}