JQuery Fancybox open delay

Question

У меня есть fancybox для отображения фотографий и их описания. Теперь он открывает fancybox на событии mouseenter. Он отлично работает с этим кодом:

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

использование 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')); 
}

Answer 2

Попробуйте это решение:

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 3

это может помочь вам

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

Answer 4

я представляю вам нужно будет использовать SetTimeout и clearTimeout

Что-то вдоль этих линий:

var timer; 

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