Precarico immagini multiple, quindi li hanno svanire in vista con jQuery

Question

Per riferimento, il bisogno di aiuto cosa che con si trova in:

http://www.photographeller.com/portfolio

Quello che mi piacerebbe fare è quando si fa clic su una sezione portafoglio aperto, prima che apra hanno il precarico immagini, quindi avere la sezione di ampliare e hanno le immagini si dissolvono in vista, forse un'immagine un caricatore con mentre le immagini sono carico o qualcosa di quell'effetto. Invece di come è ora, dove la sezione apre e le immagini caricare bruscamente. Poi, quando la sezione viene cliccato chiusa, avere le immagini svaniscono. Anche se è possibile, avere un certo allentamento della sezione quando si espande, ma questo è solo me essere molto esigente nit.

Il codice jQuery che ho in luogo alterna la classe che cambia la larghezza del contenitore delle immagini. La classe applicato cambia anche la visualizzazione dell'immagine principale a nessuno, e cambia la visualizzazione delle altre immagini nella sezione da nessuno a linea. E un altro pezzo di codice, come fornito a me nella mia ultima domanda su stack overflow, che prende la larghezza combinata di tutte le immagini nella sezione cliccato e si applica ad esso è contenenti div. Ecco il codice che ho per questo effetto:

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

Ho provato un paio di cose in funzione .Cliccate per .boxgrid, come .fadeIn () su tutte le immagini con la classe di nascosto, ma in realtà non funziona nel modo che vorrei. E provoca anche tutte le immagini in ogni sezione con quella classe di apparire, e non solo la sezione che viene cliccato.

Bene, mi scuso per il lungo domanda. Qualsiasi aiuto su questo sarebbe molto apprezzato. Grazie!

Answer 1

Il problema attuale è che si modifica la larghezza prima di dissolvenza nelle immagini.

Questo inizia ad eseguire ma ci vuole uno secondo

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

Intanto si cambia la larghezza e che è istantanea. Probabilmente un migliore effetto sarà quello di avere un div delle dimensioni della prima immagine, quindi un div le dimensioni delle immagini al suo interno.

Poi animate al con il primo alla dimensione delle altre, sarà un effetto soffocare.