jQuery 将图像附加到 div 动画答案

【问题标题】：jQuery append image to div animatejQuery 将图像附加到 div 动画
【发布时间】：2012-04-21 11:29:15
【问题描述】：

我认为最好通过给您jsFiddle 来解释这个问题。在该示例中，当用户单击图库项目时，图像将附加到带有id="showimage" 的 div。我不知道该怎么做是传递点击图像的参数，并显示该图像而不是绝对图像。

它的功能应该如下：

如果单击图像 1，则应将图像 1 附加到 showimage。它的动画应该从宽度 0px 到宽度 10% 的父 div。
如果再次单击图像 1，它应该折叠：它应该动画从宽度 100% 到宽度 0px
如果在showimage 中已有图像的情况下单击任何其他图像，则已在其中的图像应折叠，并在其位置上展开新图像

我认为这最好通过 3 个函数来完成：

扩展 - 附加到 showimage 并从 0px 动画到 100%
折叠 - 从 100% 动画到 0px 并从 showimage 移除
替换 - 在showimage 中已经存在的图像上调用折叠，并在点击的图像上调用展开

提前致谢，任何帮助将不胜感激。

【问题讨论】：

我刚刚在 jsFiddle jsfiddle.net/z2mrh/5 中修改了你的代码 ...

标签： javascript jquery html animation gallery

【解决方案1】：

在这里，我把你的小提琴分叉了，让它按你的意愿工作

http://jsfiddle.net/6vVUS/5/

【讨论】：

第三次点击有一个我似乎无法消除的错误 - 你知道吗？

【解决方案2】：

没有动画。您的代码应如下所示。

$(document).ready(function () {

    $('div.gallery').click(function (event) {

        var len = $('#showimage').find('img').length;
        var myimage = '<img src="http://s3images.coroflot.com/user_files/individual_files/302239_CauyLQoHZTkSJkkGnr3kVbFtw.jpg">';

        if (len === 0) {
            appendImage();

        }
       else {

            $('div#showimage').empty();
            appendImage();
      }

    });  

    function appendImage() {

       $('div#showimage').append(myimage);
       // your animation here 
    }  
});

【讨论】：

【解决方案3】：

我设法解决了这个问题，你可以看到一个实时的 jsFiddle 示例here。

我为这一项保持了非常简洁的代码 - 3 个单独的函数，以及 1 个 if 语句来检查 showimage div 是否有内容。

我使用的jQuery如下：

var add_image = function(clicked) {
    var image_create = '<img src="' + clicked + '">';
    $('#showimage').hide().append(image_create).slideDown(400);
};

var change_image = function(clicked) {
    $('#showimage img').slideUp(400, function() {
        $(this).remove();
        add_image(clicked);
    });
};

var remove_image = function() {
    $('#showimage img').slideUp(400, function() {
        $(this).remove();
    });
};

$('.gallery').click(function() {
    var len = $('#showimage').children().length;
    var clicked = $("img", this).attr('src');
    if (len === 0) {
        add_image(clicked);
    } else if (len === 1) {
        change_image(clicked);
    }
});

$('#showimage').click(function() {
    remove_image();
});

【讨论】：