Precarga varias imágenes, a continuación, hacer que se desvanecen a la vista con jQuery

Question

A modo de referencia, lo que necesito ayuda se encuentra en:

http://www.photographeller.com/portfolio

Lo que me gustaría hacer es cuando hace clic en una sección abierta a la cartera, antes de que se abre tiene la precarga imágenes, a continuación, tiene la sección expandir y hacer que las imágenes se desvanecen a la vista, tal vez una imagen de carga con mientras que las imágenes son carga o algo de ese efecto. En vez de cómo es ahora, donde la sección se abre y las imágenes se carga bruscamente. Luego, cuando la sección se hace clic cerrado, tener las imágenes se desvanecen. También si es posible, tener un poco de alivio en la sección cuando se expande, pero eso es sólo yo siendo exigente nit.

El código jQuery que tengo en lugar cambia la clase que cambia el ancho del contenedor de las imágenes. La clase aplica también cambia la visualización de la imagen principal a ninguno, y cambia la visualización de las otras imágenes en la sección de ninguno a línea. Y otro poco de código, según lo provisto a mí en mi última pregunta sobre desbordamiento de pila, que tiene el ancho combinado de todas las imágenes en la sección hizo clic y se aplica a él es que contiene div. Aquí está el código que tengo para este efecto:

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

he intentado un par de cosas en la función .click para .boxgrid, como .fadeIn () en todas las imágenes con la clase de escondido, pero en realidad no funciona de la manera que me gustaría. Y también hace que todas las imágenes de cada sección con esa clase de aparecer, y no sólo la sección que se hace clic en.

Bueno, pido disculpas por el largo pregunta. Cualquier ayuda en esto sería muy apreciado. Gracias!

Answer 1

El problema actual es que se cambia el ancho antes de que se desvanecen en las imágenes.

Este comienza a ejecutar, sino que toma uno segundos

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

La media de tiempo se cambia el ancho y que es instantáneo. Probablemente un efecto mejor será tener un div del tamaño de la primera imagen, a continuación, un div el tamaño de las imágenes al interior.

Entonces animado a la con de la primera con el tamaño de la otra, lo hará un efecto smother.