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

Question

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

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

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

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

Answer 1

По сути, вам нужно загрузить новое изображение в другой 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/

Answer 2

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

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

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