预加载多个图像，然后让它们与jQuery淡入视图

Question

作为参考，我需要帮助的是：

http://www.photographeller.com/portfolio

我想做的是，当您单击投资组合部分以打开时，在打开之前，请先使用图像预付，然后将部分展开并使图像逐渐淡入视图，也许在加载图像或其他内容时带有装载机图像这种效果。而不是现在的状态，部分打开并突然加载。然后，当单击“关闭”部分时，将图像淡出。另外，如果可能的话，在扩展时就可以放松一下，但这只是我很挑剔。

我所拥有的jQuery代码可以切换更改图像容器宽度的类。所应用的类还将主图像的显示更改为无，并将部分中其他图像的显示从无线变为内联。以及在堆栈溢出的最后一个问题中提供给我的另一个代码，这将单击的部分中的所有图像的组合宽度占据，并应用于其包含的div。这是我为此效果的代码：

<script type="text/javascript">

$(document).ready(function(){       
$(".boxgrid").click(function () {
$(this).toggleClass("openBoxgrid", 1000);

});

$('div.innerOpen').each(function() {
    var totalImageWidth = 0;

    $("img", this).each(function () {
      totalImageWidth += $(this).width();
    });

    $(this).width(totalImageWidth);
});

});

</script> 

我在.boxGrid的.boxGrid单击函数中尝试了一些内容，例如所有带有隐藏类别的图像上的.fadein（），但它并不能真正按照我想要的方式工作。它还导致每个部分中的所有图像出现，而不仅仅是单击的部分。

好吧，对于一个漫长的问题，我深表歉意。对此的任何帮助将不胜感激。谢谢！

Answer 1

当前的问题是，在淡入图像之前，您会更改宽度。

这开始执行，但需要一秒钟

$(this).toggleClass("openBoxgrid", 1000);

意思是当您更改宽度时，这是瞬时的。可能会有更好的效果是拥有第一个图像的大小的div，然后将图像大小与内部图像的大小相同。

然后，与另一个大小相同，将其动画起来，这将是一个窒息的效果。