懸停時顯示jQuery延遲

如何延遲顯示「預覽」div的懸停？懸停時顯示jQuery延遲

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插件嘗試過，但用大量的圖片，超時則顯示兄妹「禮」「.preview」的div。

此外，在「.imageGalleryAlbum li img」內移動鼠標可以導致「預覽」div顯示和隱藏。這不是預期的效果。一旦顯示「預覽」div，只要鼠標不再停留在「.imageGalleryAlbum li img」圖像上，它就應該隱藏起來。

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

來源

2012-12-11 JV10

您可以在動畫的方法使用delay()，並增加了持續時間show()將使動畫，甚至只有一毫秒，像下面，就足夠了：

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

FIDDLE

來源

2012-12-11 01:50:55 adeneo

謝謝，但它仍然有，如果IMG的迅速將鼠標懸停顯示同級裏預覽的div的問題。無論如何解決這個問題？ – JV10

懸停時顯示jQuery延遲

回答

相關問題