jQuery将图像附加到div动画

Question

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

应该功能如下：

• 如果图像1被点击时，图像1应附加到showimage。 它应该从父div的宽度0px到宽度10％进行动画处理。
• 如果图像1再次点击后，它应合拢：它应该从宽度100％动画 与宽度0像素
• 如果点击任何其他IMG而已经存在showimage的图像，所述图像已经内部应合拢，而新的在其位扩展

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

1. 展开 - 追加到showimage和动画0px到100％
2. 崩溃 - 从100％动画为0px和showimage
3. 删除替换 - 在showimage已经调用图像崩溃，并呼吁扩大图像上预先点击

感谢，任何帮助将是非常赞赏。

Answer 1

我设法解决这个问题，你可以看到现场的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(); 
});​ 

Answer 2

这里我分叉的小提琴和制成，只要你想

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

Answer 3

它的工作不到位的动画。你的代码应该看起来像这样。

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