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

Question

Pour référence, la chose I ont besoin d'aide est situé à:

http://www.photographeller.com/portfolio

Ce que je voudrais faire est lorsque vous cliquez sur une section de portefeuille ouverte, avant l'ouverture ont la pré-charge des images, ont alors la section se développer et que les images disparaissent en vue, avec peut-être une image du chargeur alors que les images sont chargement ou quelque chose de cet effet. Au lieu de la façon dont il est maintenant, où la section ouvre et les images charger brusquement. Ensuite, lorsque la section est cliqué fermée, que les images effacent. De plus, s'il est possible, avoir un certain assouplissement de la section lors de son expansion, mais c'est juste moi d'être pointilleux nit.

Le code jquery Je en place permet de basculer la classe qui modifie la largeur du conteneur des images. La classe appliquée modifie également l'affichage de l'image principale sans pareil, et modifie l'affichage des autres images dans la section de zéro à roues alignées. Et un autre morceau de code, comme m'a fourni dans ma dernière question sur un débordement de pile, qui prend la largeur combinée de toutes les images dans la section cliqué et s'y applique est contenant 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 petites choses dans la fonction .cliquez pour .boxgrid, comme .fadeIn () sur toutes les images avec la classe cachée, mais il ne fonctionne pas vraiment la façon dont je voudrais. Et elle provoque aussi toutes les images dans chaque section avec cette classe à paraître, et non pas seulement la section qui est cliqué.

Eh bien, je présente mes excuses pour la longue question. Toute aide sur ce serait grandement apprécié. Merci!

Answer 1

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

Cela commence à exécuter mais il faut une seconde

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

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

Alors Animer la avec de la première à la taille de l'autre, ce sera un effet d'étouffer.