jQuery fadeIn（）和fadeOUt（）没有延迟

Question

请参阅随附的JSFiddle。

Div1（红色）淡出显示div2（蓝色）。一切正常。但是当div1逐渐消失并且div2在全白时消失之间有一段时间。我理解这是因为fadeOut完成内部的代码淡入淡出。

有没有办法可以在淡入淡出中途开始淡出淡出。我必须用图像来做，有点模仿滑块。

我尝试在两个图像上使用z-index并在fadeIn上使用延迟，但这看起来效果不好。它将图像堆叠在一起。不确定我是否可以将z-index用于图像

任何帮助表示赞赏。

http://jsfiddle.net/nauy9zsg/

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

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

Answer 1

这是你做的事情的一种方式。淡出第一个div然后在短暂的延迟后淡出第二个div。定位它们，使它们通过使用abolsute定位坐在彼此的顶部：

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

jsFiddle example

Answer 2

你是说你想让一个人融入另一个人。你可以使用position:absolute。这是我的例子http://jsfiddle.net/pgrillot/ywbgdgyL/

Answer 3

这是你想要实现的吗？

JSFIDDLE

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

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

和css

#div1{
    height:100px;
    width:100px;
    background-color:red;
    display:none;
    position:absolute;
}

如果你想让它们重叠使用position:absolute或relative你可以将它们添加到容器中以便更好地定位。

你还可以继续看看这个

ANOTHER FIDDLE

Answer 4

如果你想让蓝色div无延迟出现，那么从你的fadeToggle方法中删除div2的时间延迟（持续时间）（蓝色div）

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

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

这是解决方案 - http://jsfiddle.net/nauy9zsg/1/

Answer 5

你的问题在于两个div无法同时处于“淡入淡出状态”。否则一个将出现在另一个下面。你看到的白色是第二个div褪色的开始，另一个明智的你看起来就像两个div一样堆积了一秒钟。你试图用它做什么，可能有更好的方法来处理它的处理方式，以允许更平滑的过程。