Question

setInterval定期调用的以下代码执行以下序列：
1.淡入图像750毫秒
2.将其浸入6秒钟 3.淡出图像750毫秒
4.随机选择另一个图像（函数randomPic）
5.淡入750毫秒，依此类推：

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

您可以看到效果here。如何才能获得旧图像的淡入淡出和新图像的淡入淡出同时运行？

谢谢，拉尔夫

Answer 1

基本上，您需要将新图像加载到图像下方具有z-index的另一个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/

Answer 2

如果你没有做任何其他事情，你可以这样做：

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

或者，如果它们都显示在同一区域，则可以淡入，一旦淡入，将背景图像设置为下一个图像。然后，一旦淡出，将背景设置为下一个，依此类推。

jQuery：同时fadeIn和fadeOut

2 个答案: