1

如何延迟悬停显示“预览”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/

4

1 回答 1

2

您可以使用delay()动画方法，并添加持续时间show()使其动画化，即使只有一毫秒，如下所示，就足够了：

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

小提琴

于 2012-12-11T01:50:55.490 回答