0

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

它的功能应该如下：

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

我认为这最好通过 3 个功能来完成：

  1. 展开 - 附加到showimage0px 到 100% 并设置动画
  2. Collapse - 从 100% 动画到 0px 并从showimage
  3. 替换 - 对已存在的图像调用折叠showimage，并在单击的图像上调用展开

在此先感谢，任何帮助将不胜感激。

4

3 回答 3

1

没有动画到位。您的代码应该看起来像这样。

$(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 
    }  
});​
于 2012-04-21T12:08:35.170 回答
1

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

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

于 2012-04-21T11:58:46.657 回答
0

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

我为这一个保持代码非常整洁 - 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();
});​
于 2012-04-27T20:24:58.770 回答