jQuery的：同时淡入淡出和

Question

以下代码是由setInterval的定期调用执行以下序列：
1.褪色的图像中为750毫秒
2. diplay它为6秒
3.淡出图像750毫秒
4.随机选择另一图像（功能randomPic）
5.淡入为750毫秒等：

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

可以看到效果here。我怎样才能让旧图像的淡出和淡入淡出同时运行？

谢谢，拉尔夫

Answer 1

基本上，你需要加载新的图像在另一个div中，图像下面的z-index淡出。这并不是说它同时在消失，它只是在最初淡出时才被发现。一旦顶部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); 
}); 

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