jquery - jQuery图片库预览图片弹出

Question

我创建了一个图片库，在悬停时会弹出预览图片。

http://jsfiddle.net/WSfka/

将鼠标悬停在缩略图上，将显示较大的图像预览。

我对预览图像在缩略图图像之间移动的方式不满意。如何简化脚本并改进预览图像弹出窗口？

$(document).ready(function() {
    $('.imageGalleryAlbum li a img').mouseenter(function() {
        $(this).closest('li').find('.preview').delay(500).fadeIn(1);
        $(this).closest('li').siblings().find('.preview').fadeOut(1);
        return;
    });
    $('.imageGalleryAlbum li .preview').hover(function() {
        $(this).closest('li').siblings().find('.preview').fadeOut(1);
        return;
    });
    $('.imageGalleryAlbum li .preview').mouseleave(function() {
        $(this).closest('li').find('.preview').fadeOut(1);
        $(this).closest('li').siblings().find('.preview').fadeOut(1);
        return;
    });
    $('.imageGalleryAlbum li .preview').click(function() {
        $(this).closest('li').find('.preview').fadeOut(1);
        $(this).closest('li').siblings().find('.preview').fadeOut(1);
        return;
    });
});

$(document).mouseup(function(e) {
    var container = $(".preview");
    if (container.has(e.target).length === 0) {
        container.fadeOut(1);
    }
});​

Answer 1

第三次更新

尝试这个

更新了你的小提琴

var x;  

$(document).ready(function() {

        $('.imageGalleryAlbum li a img').on('mouseenter', function() {

            $('.preview').stop().hide();

            x = $(this).closest('li').find('.preview');

            if( $(x).is(':visible') ) {
                $(x).show();
            } else {
                $('.preview').hide();
                $(this).closest('li').find('.preview').stop().delay(500).fadeIn(0);
            }
        });


        $('.preview').parent().on('click mouseleave', function() {
            $('.preview').hide();
        });

    });

    $(document).mouseup(function(e) {
        var container = $(".preview");
        if (container.has(e.target).length === 0) {
            container.fadeOut(1);
        }
    });

Answer 2

你可以试试这个例子。

http://nemanjamilosavljevic.com/javascript/gallery_view/ 这是我制作的画廊，它可以满足您的需求，它还允许用户移动鼠标，并且仍然可以打开大图像。

希望该方法对您有所帮助，或者您可以使用整个示例。

干杯；）