複数の画像をプリロードしてから、それらを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> 

.fadein（）のように、.fadein（）のように、click of hiddenの.fadein（）のように、.fadein（）のように、.fadein（）でいくつかのことを試しましたが、実際には私が望む方法では機能しません。また、クリックされたセクションだけでなく、そのクラスのすべてのセクションのすべての画像が表示されます。

さて、私は長い質問をお詫びします。これに関する助けは大歓迎です。ありがとうございました！

Answer 1

現在の問題は、画像でフェードする前に幅を変更することです。

これは実行を開始しますが、1秒かかります

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

幅を変更している間、それは瞬時です。おそらく、より良い効果は、最初の画像のサイズのdivを持ち、次に内部の画像のサイズのdivを持つことです。

次に、他のサイズの最初のサイズにアニメーション化すると、窒息効果が発生します。