jQuery delay show on hover

Question

How can I delay the hover showing the "preview" div?

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
    });
});

I've tried using the jQuery.hoverIntent plugin, but with large amounts of images, the timeout is displaying sibling "li" ".preview" divs.

Also the moving the mouse around within the ".imageGalleryAlbum li a img" can cause the "preview" div to show and hide. Which is not the desired effect. Once the "preview" div is displayed it should only hide once the mouse is no longer hovering over the ".imageGalleryAlbum li a img" image.

I've created the following demo: http://jsfiddle.net/9msxR/

Answer 1

You can use delay() on animated methods, and adding a duration to show() will make it animated, even as little as one millisecond, like below, is enough:

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

FIDDLE