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 関数で、クラスが hidden のすべての画像で .fadeIn() など、いくつか試してみましたが、実際には思い通りに動作しません。また、クリックされたセクションだけでなく、そのクラスを持つすべてのセクションのすべての画像が表示されます。

さて、長い質問で申し訳ありません。これに関するヘルプは大歓迎です。ありがとうございました！

4

1 に答える 1

0

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

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

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

あなたが幅を変えている間、それは瞬間的です。おそらくより良い効果は、最初の画像のサイズのdivを設定し、次に内部のすべての画像のサイズのdivを設定することです。

次に、最初のwithを他のサイズにアニメートすると、窒息効果が発生します。

于 2010-12-07T15:41:37.137 に答える