préchargement plusieurs images, puis les ont fondu en vue avec jquery

Question

Pour référence, la chose que je besoin d'aide avec est situé à:

http://www.photographeller.com/portfolio

Ce que je voudrais faire est lorsque vous cliquez sur un portefeuille section à ouvrir, avant qu'il n'ouvre avoir préchargé les images, puis avoir la section se développer et avoir les images se fondre dans la vue, avec peut-être une image du chargeur pendant le chargement des images ou quelque chose de cet effet. Au lieu de comment c'est maintenant, où la section s'ouvre et les images se chargent brusquement. Puis, lorsque la section est cliquée, les images disparaissent. Aussi si c'est possible, ayez un peu d'assouplissement sur la section quand elle se développe, mais c'est juste que je suis un peu difficile.

Le code jquery que j'ai en place bascule la classe qui modifie la largeur du conteneur des images. La classe appliquée change également l'affichage de l'image principale à none, et change l'affichage des autres images dans la section de none à inline. Et un autre bit de code, tel que fourni dans ma dernière question sur le débordement de pile, qui prend la largeur combinée de toutes les images dans la section cliquée et s'applique à ce qu'il contient div. Voici le code que j'ai cet effet:

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

J'ai essayé quelques choses dans la fonction .cliquez pour .boxgrid, comme .fadeIn() sur toutes les images avec la classe cachée, mais il doesn Ne fonctionne pas comme je le voudrais. Et cela provoque également l'affichage de TOUTES les images de chaque section de cette classe, et pas seulement la section sur laquelle vous avez cliqué.

Eh bien, je m'excuse pour la longue question. Toute aide à ce sujet serait grandement appréciée. Je vous remercie!

Answer 1

Le problème actuel est que vous modifiez la largeur avant de fondre dans les images.

Cela commence à exécuter mais il faut une seconde

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

moyenne pendant que vous modifiez la largeur et est instantanée. Probablement un meilleur effet sera d'avoir un div de la taille de la première image, puis un div de la taille de toutes les images à l'intérieur.

Puis animer à l'avec de la première à la taille de l'autre, il va un effet étouffer.