jQuery: одновременно fadeIn и fadeOut

Следующий код, который периодически вызывается setInterval, выполняет следующую последовательность:
1. исчезать в изображении за 750 мс
2. окуните его на 6 секунд
3. затухание изображения на 750 мс
4. случайным образом выбрать другое изображение (функция randomPic)
5. затухание в течение 750 мс и т. Д.

$("#_fadee_").fadeIn(750, function() {
    $("#_fadee_").delay(6000).fadeOut(750, randomPic);
});

Вы можете увидеть эффект здесь. Как заставить одновременно исчезать старое изображение и новое на новом?

Спасибо Ральф

Источник

2 ответа

Решение

По сути, вам нужно загрузить новое изображение в другой div, у которого z-индекс под изображением исчезает. Дело не в том, что оно постепенно исчезает, оно просто раскрывается, когда исчезает начальное. Как только верхний div полностью исчезнет, ​​вы загружаете в него изображение мяу и возвращаете его непрозрачность 1, чтобы он покрывал div, в который вы будете загружать следующее изображение. В псевдокоде это будет выглядеть примерно так:

var fadeO = function () {
    var $fo = $('#_fadeO_');
    var $fi = $('#_fadeI_');
    var newImg = // load image here;

    $fi.html(newImg);

    $fo.fadeOut(1500, function() {
        // put #_fadeO_ back on top with new image
        $fo.html(newImg);
        $fo.css({'display':'block', 'opacity':1});

        // call function again after 6 seconds
        setTimeout(fadeO, 6000);
    });
};

fadeO();

... но я сделал это, чтобы вы могли видеть это в действии, переключая цвета фона вместо содержимого изображения. Вы должны быть в состоянии получить представление о том, как сделать то же самое с загруженными изображениями, на основе приведенного выше псевдокода и как настроить HTML, CSS и JS здесь:

http://jsfiddle.net/UbmS9/

Источник

Если вы ничего не делаете, вы можете сделать это:

$("#_fadee_").fadeIn(750, function() {
    setTimeout(function() {
        $("#_fadee_").fadeOut(750, randomPic);
        // Start fading in your other pic
    }, 6000);
});

В качестве альтернативы, если они оба отображаются в одной и той же области, вы можете увеличить их, а после их появления установить фоновое изображение на следующее изображение. Затем, как только он исчезнет, ​​установите следующий фон и так далее.

Источник
Другие вопросы по тегам