JQuery задержка шоу при наведении

Question

Как я могу отложить наведение при отображении элемента "Предварительный просмотр"?

function showPreview() {
    $(this).closest('li').find('.preview').show();
}
function hidePreview() {
    $(this).closest('li').find('.preview').hide();
}
$(document).ready(function() {
   // $(".imageGalleryAlbum li a img").hover(showPreview,hidePreview); // Option A
   // $(".imageGalleryAlbum li a img").hoverIntent(showPreview,hidePreview); // Option B
    $(".imageGalleryAlbum li a img").hoverIntent({ //Option C
        over: showPreview,
        timeout: 1000,
        out: hidePreview
    });
});

Я пытался использовать плагин jQuery.hoverIntent, но при большом количестве изображений тайм-аут показывает одноуровневые "li" ".preview" divs.

Кроме того, перемещение мыши внутри ".imageGalleryAlbum li a img" может вызвать отображение и скрытие элемента "Предварительный просмотр". Что не является желаемым эффектом. После отображения элемента "Предварительный просмотр" его следует скрыть только после того, как мышь больше не будет зависать над изображением ".imageGalleryAlbum li a img".

Я создал следующую демонстрацию: http://jsfiddle.net/9msxR/

Answer 1

Ты можешь использовать delay() на анимированных методах, и добавление продолжительности к show() сделает его анимированным, достаточно даже одной миллисекунды, как показано ниже:

$(this).closest('li').find('.preview').delay(1000).show(1);

FIDDLE