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”divs。

此外，在“.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);

FIDDLE

悬停时jQuery延迟显示

1 个答案: