Question

请参阅随附的JSFiddle。

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

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

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

感谢任何帮助。

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

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

Answer 1

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

Answer 2

这是你想要实现的目标吗？

<强> 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;
}

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

你也可以继续看看这个

<强> ANOTHER FIDDLE

Answer 3

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

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

<强> jsFiddle example

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。你试图用它做什么，可能有更好的方法来处理它的处理方式，以便更顺利地进行处理。

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

5 个答案: