Question

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

它的功能如下：

如果单击图像1，则图像1应附加到showimage。它应该从父div的宽度0px到宽度10％进行动画处理。
如果再次单击图像1，它应该会崩溃：它应该是动画从宽度100％到宽度0px
如果在showimage中已有图片时点击任何其他img，则内部图片应该会折叠，而新图片会在其位置展开

我认为最好用3个函数来完成：

展开 - 附加到showimage并动画从0px到100％
折叠 - 从100％动画到0px并从showimage
替换 - 在showimage中已有的图片上调用折叠，并在点击的图片上调用展开

提前致谢，我们非常感谢任何帮助。

Answer 1

在这里，我分叉你的小提琴，让它按你想要的方式工作

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

Answer 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 
    }  
});

Answer 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();
});

jQuery将图像附加到div动画

3 个答案: