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>

我已经在.creg函数的.click函数中尝试了一些东西，比如.fadeIn（），对所有隐藏类的图像都有效，但它并没有真正按照我喜欢的方式工作。并且它还会导致出现该类的每个部分中的所有图像，而不仅仅是单击的部分。

好吧，我为这个冗长的问题道歉。任何有关这方面的帮助将不胜感激。谢谢！

Answer 1

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

这开始执行但需要一秒

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

平均而你改变宽度并且是瞬间的。可能更好的效果是获得第一张图像大小的div，然后是内部图像的大小div。

然后动画到第一个到另一个的大小，它会产生窒息效果。

预加载多个图像，然后使用jquery将它们淡入视图

1 个答案: