j查询延迟在悬停时显示

Question

如何延迟显示"预览"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
    });
});

我尝试使用 jQuery.hoverIntent 插件，但对于大量图像，超时显示兄弟姐妹"li".preview"div。

此外，在".imageGalleryAlbum li a img"中移动鼠标会导致"预览"div显示和隐藏。这不是预期的效果。显示"预览"div 后，它应该仅在鼠标不再悬停在".imageGalleryAlbum li a img"图像上时才隐藏。

我创建了以下演示：http://jsfiddle.net/9msxR/

Answer 1

您可以在动画方法上使用delay()，并且向show()添加持续时间将使其具有动画效果，即使只有一毫秒，如下所示，也就足够了：

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

小提琴