Предварительная загрузка нескольких изображений, а затем их исчезновение с помощью jquery - PullRequest
Новая
       20

Предварительная загрузка нескольких изображений, а затем их исчезновение с помощью jquery

0 голосов
/ 07 декабря 2010

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

http://www.photographeller.com/portfolio

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

Код jquery, который у меня есть, переключает класс, который изменяет ширину контейнера изображений. Применяемый класс также изменяет отображение основного изображения на none и изменяет отображение других изображений в разделе с none на inline. И еще один фрагмент кода, предоставленный мне в моем последнем вопросе о переполнении стека, который берет общую ширину всех изображений в выбранном разделе и применяется к нему, содержащему 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>

Я попробовал несколько вещей в функции .click для .boxgrid, например .fadeIn () на всех изображениях с классом скрытого, но на самом деле это не работает так, как мне бы хотелось. И это также вызывает появление ВСЕХ изображений в каждом разделе с этим классом, а не только в разделе, по которому щелкают.

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

1 Ответ

0 голосов
/ 07 декабря 2010

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

Это начинает выполняться, но это занимает одну секунду 

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

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

Тогда анимируйте с первого по размеру другого, это приведет к удушающему эффекту.

...