Как усилить / исчезнуть отдельное изображение из списка изображений с помощью jQuery

Мне почти жаль, что я спрашиваю здесь, поскольку я считаю, что это будет простой квест, но я не могу понять, как создать это с помощью jQuery, поскольку я все еще учусь.

Мы пытаемся очистить плохо закодированный веб-сайт с помощью javascript-анимаций, идущих то тут, то там, поэтому я хочу упростить разработку, превратив каждую часть в jQuery вместо взломов DHTML / Javascript, которые сложно поддерживать.

Ситуация

У меня есть два DIV, один для "показанного изображения" называется

<div id="fader"></div> /* the shown object */

Затем где-то в HTML у меня есть определенный пользователем список изображений для отображения в этом контейнере фейдера.

Изображения находятся в контейнере, который я назвал

        <div id="fadercontent"></div>

Нравится:

        <div id="fadercontent">
                <div><img src="image0101.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image0444.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image0256.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image6821.jpg" width="200" height="200" border="0" alt="" /></div>
        </div>

Этот список может различаться по размеру, у некоторых есть 1 изображение, у некоторых - 20 ... Причина DIV в том, что когда-нибудь я могу изменить его с IMG на что-то другое. Итак, я хочу захватить все содержимое DIV + и преобразовать этот «DIV» в объект «фейдер».

Решение / идея

Сначала я пытался собрать их в массив. Взяв список из разделов содержимого фейдера.

Что-то вроде:

var fadercontent = $('#fadercontent').children();

Затем я бы взял первый элемент из fadercontent и заменил содержимое "#fader"

Я понял, что $ ("# fader"). Html (...) - это то, как я заменяю содержимое, а fadeIn () будет фейдером непрозрачности.

Я не могу понять:

1) как мне отслеживать, какой элемент следующий, например. найти следующий в объекте fadercontent, чтобы я мог зациклить список. В javascript я использовал длину массива и простой счетчик.

2) как установить скорость анимации. Попытка создать fadeIn через 2 секунды, затем пауза 1 секунда, затем затухание 2 секунды, замена изображения, 2 секунды fadeIn (цикл). Может быть, нужен jQuery.Animate?

Надеюсь, что кто-то с талантом jQuery покажет мне, что мне нужно делать дальше.


animation jquery fadein imagelist
person BerggreenDK    schedule 11.01.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Приведенный ниже код будет перебирать каждый дочерний элемент faderContent и заменять html _2 _..., и он просто продолжит работу и начнется с начала, когда достигнет конца.

var index = -1;
var max = $("#fadercontent").children().length;
FadeNext();

function FadeNext() {
    index++;
    // check if at the end, otherwise start over
    if (index >= max) index = 0;

    // if #fader has no children, fadeOut will never be executed
    if ($("#fader").children().length > 0) {
        $("#fader").children().fadeOut(2000, DoFade);
    }
    else DoFade();
}

function DoFade() {
    // clone the object rather than move it so you can use it again.
    var $clone = $("#fadercontent").children().eq(index).clone().hide();

    $("#fader").html($clone);
    // fade in
    $("#fader").children().fadeIn(2000, function() {        
        FadeNext();
    });
}

рабочий пример: http://jsfiddle.net/Jruns/2/

person hunter    schedule 11.01.2011
comment
Этот форум потрясающий !!! Потрясающие! вот и получилось! Если бы я должен был встроить задержку / паузу при отображении содержимого изображения / div. Требуется ли для этого дополнительная функция, или я могу как-то связать ее? В любом случае отметьте правильный ответ. : o) - person BerggreenDK; 11.01.2011
comment
да, вы могли бы довольно легко связать это с .delay(2000) - person hunter; 11.01.2011
comment
после fadeIn (). delay (2000) или? - person BerggreenDK; 15.01.2011