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中加载新图像.并不是它同时消失,它刚刚被揭开,因为初始消失了.一旦顶部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/