jQuery：同時淡入和淡出

Question

以下由setInterval定期調用的代碼執行以下序列：
1.淡入圖像750毫秒
2.播放6秒鍾
3.淡出圖像750毫秒
4.隨機選擇另一張圖片（功能randomPic）
5.漸入750毫秒，依此類推：

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

您可以在這里看到效果。 如何使舊圖像的fadeOut和新圖像的fadeIn能夠同時運行？

謝謝，拉爾夫

Answer 1

基本上，您需要將新圖像加載到另一個div中，該圖像下方的z索引會逐漸消失。 並不是它同時消失，而是隨着最初的消失而被發現。 頂部div完全淡出后，您可以將mew圖像加載到其中，並將其不透明度恢復為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);
});

另外，如果它們都顯示在同一區域，則可以淡入，一旦淡入，將背景圖像設置為下一張圖像。 然后，一旦淡出，將背景設置為下一個，依此類推。