複数の画像をプリロードしてから、それらをjQueryで視野に入れてもらう
-
09-10-2019 - |
質問
参照のために、私が助けを必要とするものは次の場所にあります:
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()でいくつかのことを試しましたが、実際には私が望む方法では機能しません。また、クリックされたセクションだけでなく、そのクラスのすべてのセクションのすべての画像が表示されます。
さて、私は長い質問をお詫びします。これに関する助けは大歓迎です。ありがとうございました!
解決
現在の問題は、画像でフェードする前に幅を変更することです。
これは実行を開始しますが、1秒かかります
$(this).toggleClass("openBoxgrid", 1000);
幅を変更している間、それは瞬時です。おそらく、より良い効果は、最初の画像のサイズのdivを持ち、次に内部の画像のサイズのdivを持つことです。
次に、他のサイズの最初のサイズにアニメーション化すると、窒息効果が発生します。