0

看看这个小提琴。

这是最重要的标记：

$("div#images > img").click(function() {
    if ($(this).hasClass("active")) {
        $(this).fadeOut("fast").remove();    
        $("div#overlay").fadeOut("fast");
    }
    else {
        $(this).clone().addClass("active").appendTo("div#images");
        var marginL = -$("div#images > img.active").width() / 2;
        $("div#images > img.active").css("margin-left", marginL);

        $("div#overlay").fadeIn("fast");
    }
});​

我想要的是

当用户单击图像时，jQuery 应该克隆该图像并立即在灯箱样式的弹出窗口中打开它。（我不想为此使用插件。）这很好用。但是，我还希望当用户单击该克隆图像时，该图像被删除并且覆盖再次淡出。这根本行不通。

有人知道吗？

提前致谢。

4

2 回答 2

1

由于该对象是一个活动对象并且您需要将 .click 函数更改为 .live 函数，如下所示：

$("div#images > img").click(function() {...

对此：

$("div#images > img").live('click',function() {...

这里是 jsFidle： http: //jsfiddle.net/7Wp9z/52/ 希望有帮助

于 2012-09-23T10:48:12.410 回答
1

试试这个：

function hideClone() {
    $(this).fadeOut("fast").remove();
    $("#overlay").fadeOut("fast");
}

$("#images").on('click', 'img', function() {
    var $this = $(this),
        $div = $this.closest('div'),
        $clone = $this.clone(),
        marginL = $clone.width() / -2;
    $clone.addClass("active").css("margin-left", marginL).appendTo($div).on('click', hideClone);
    $("#overlay").fadeIn("fast");
});

更新的小提琴

于 2012-09-23T11:20:19.263 回答