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()、以下のようにわずか 1 ミリ秒でも十分にアニメーション化されます。

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

フィドル

于 2012-12-11T01:50:55.490 に答える