Preload mehrere Bilder, dann haben sie in den Blick verblassen mit jquery

Question

Als Referenz das, was ich brauche Hilfe mit befindet sich unter:

http://www.photographeller.com/portfolio

Was ich möchte, ist zu tun, wenn Sie ein Portfolio Abschnitt zu öffnen klicken, bevor sie die Bilder Vorspannung öffnet, haben dann den Abschnitt erweitern und haben die Bilder in den Blick verblassen, mit vielleicht einem Lader Bild, während die Bilder Laden oder etwas in der Wirkung. Statt, wie es jetzt ist, wo der Abschnitt öffnet und die Bilder laden abrupt. Dann, wenn der Abschnitt geschlossen geklickt wird, haben die Bilder ausgeblendet. Auch wenn es möglich ist, haben einige auf dem Abschnitt Lockerung, wenn es sich ausdehnt, aber das ist nur mir sein nit wählerisch.

Der jquery Code, den ich an der richtigen Stelle schaltet die Klasse, die die Breite des Behälters der Bilder ändert. Die Klasse galt auch die Anzeige des Hauptbild zu keinem ändert, und ändert die Anzeige der anderen Bilder in dem Abschnitt von keinem zu inline. Und noch ein Stück Code, wie es in meiner letzten Frage auf Stack-Überlauf zu mir geliefert, dass die kombinierte Breite aller Bilder im Abschnitt nimmt geklickt und gilt es div enthalten ist. Hier ist der Code, den ich für diesen Effekt haben:

<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> 

Ich habe ein paar Dinge in der .click Funktion für .boxgrid versucht, wie .fadeIn () auf alle Bilder mit der Klasse von versteckt, aber es funktioniert nicht wirklich die Art und Weise Ich mag würde. Und es verursacht auch alle Bilder in jedem Abschnitt mit dieser Klasse zu erscheinen, und nicht nur den Abschnitt, die angeklickt wird.

Nun, ich entschuldige mich für die lange Frage. Jede mögliche Hilfe auf diesem würde sehr geschätzt werden. Vielen Dank!

Answer 1

Das aktuelle Problem ist, dass Sie die Breite ändern, bevor Sie in den Bildern verblassen.

Das beginnt auszuführen, aber es dauert 1 Sekunde

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

Mittelwert, während Sie die Breite ändern, und das ist augenblicklich. Eine bessere Wirkung wird ein div der Größe des ersten Bildes haben sein, dann ein div der Größe von al die inneren Bildern.

Dann belebte auf dem mit dem ersten auf die Größe der anderen, wird es eine smother Wirkung.