无延迟地执行jQuery fadeIn()和fadeout()

请参阅所附的JSFdle。

Div1(红色)淡出，显示DIV2(蓝色)。一切都运行得很好。但在DIV1淡出和DIV2淡入之间有一小段时间，当它全是白色的时候。我理解这是因为淡入代码在淡出补全中。

有没有办法在淡入的中途开始淡出。我必须使用图像，有点像滑块。

我尝试在两个图像上使用z-index，并在fadeIn上使用延迟，但似乎效果不佳。它将图像一个接一个地堆叠在一起。不确定是否可以对图像使用z索引

感谢任何帮助。

http://jsfiddle.net/nauy9zsg/

$('#div1').fadeIn();

setTimeout(function(){
    $('#div1').fadeToggle(600,function() {
       $('#div2').fadeToggle(600);
    });
},4000);

---

解决方案

这里有一种方法可以实现您的目标。淡出第一个div，然后在短暂延迟后淡入第二个div。通过使用取消定位将它们放置在一起，使它们相互堆叠：

$('#div1').fadeIn();
setTimeout(function () {
    $('#div1').fadeOut(600)
    setTimeout(function () {
        $('#div2').fadeToggle(600);
    }, 300);
}, 4000);

jsFiddle example