0

作为参考，我需要帮助的内容位于：

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()，但它并没有真正按照我想要的方式工作。它还会导致显示该类的每个部分中的所有图像，而不仅仅是单击的部分。

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

4

1 回答 1

0

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

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

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

意味着当你改变宽度时，那是瞬间的。可能更好的效果是有一个与第一个图像大小相同的 div，然后是一个与内部所有图像大小相同的 div。

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

于 2010-12-07T15:41:37.137 回答