预加载多个图像，然后使用 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 的 .click 函数中尝试了一些操作，例如对所有具有隐藏类的图像进行 .fadeIn() ，但它并没有真正按照我的方式工作想要。它还会导致显示该类别的每个部分中的所有图像，而不仅仅是单击的部分。

好吧，我为这个冗长的问题道歉。对此的任何帮助将不胜感激。谢谢你！

Answer 1

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

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

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

平均而言，当您更改宽度时，这是瞬时的。也许更好的效果是先使用第一个图像大小的 div，然后再使用内部所有图像大小的 div。

然后将第一个动画调整为另一个动画的大小，这将产生窒息效果。