Предварительная нагрузка нескольких изображений, затем у них выцветает в поле зрения с jQuery

Question

Для справки то, что мне нужна помощь, расположенная по адресу:

http://www.photograper.com/portfolio.

То, что я хотел бы сделать, это когда вы нажимаете в разделе «Портфолио», чтобы открыть, прежде чем он открывается, у них есть предварительная загрузка изображений, то попросите раздел расширяться и иметь изображения, чтобы изображения были представлены, может быть, может быть, изображение загрузчика, когда изображения загружаются или что-то из этого эффекта. Вместо того, как оно сейчас, где раздел открывается, и изображения резко загружаются. Затем, когда раздел нажат закрыто, вытесните изображения. Также, если это возможно, ослабиться на раздел, когда он расширяется, но это только я, будучи смытями.

Код jQuery у меня в месте переключается класс, который меняет ширину контейнера изображений. Применяемый класс также изменяет отображение основного изображения на None, и изменяет отображение других изображений в раздел из ни одного вряда. И еще один код кода, поставляемый мне в моем последнем вопросе о переполнении стека, который принимает комбинированную ширину всех изображений в разделе, щелкнув и применимо к ней, содержащую div. Вот код, который у меня есть для этого эффекта:

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

Я пробовал несколько вещей в функции. Krick для .Boxgrid, как .fadein () на всех изображениях с классом скрытых, но это на самом деле не работает так, как я хотел бы. И это также вызывает все изображения в каждом разделе с помощью этого класса, чтобы появиться, а не только раздел, на котором нажата.

Ну, я прошу прощения за длительный вопрос. Любая помощь по этому вопросу будет принята с благодарностью. Благодарю вас!

Answer 1

Текущая проблема заключается в том, что вы изменяете ширину до того, как вы исчезните на изображениях.

Это начинает выполнять, но требуется одна секунда

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

Среднее, пока вы меняете ширину, и это мгновенно. Вероятно, лучший эффект будет иметь div размер первого изображения, а затем div размер Al изображения внутри.

Затем анимируйте с первым до размера другого, он будет дышать.