Question

让我们说我有2个div，一个是隐藏的，另一个是显示的。单击一个按钮时，我想使用jQuery淡入淡出效果淡出一个div并淡入隐藏的div。

所以 -

<div id="part1">Hello</div>
<div id="part2" style="display: none">Hello2!</div>
<button id="btn1">Click here!</button>

和JS -

$("#btn1").on("click", function(){
    $("#part1").fadeToggle();
    $("#part2").fadeToggle();
});

现在，这有效，但你可以想象会发生的事情是它首先隐藏第一个div，然后显示第二个div，然后立即将第二个div放到前一个div所在的位置。

我该怎么办？我希望他们能够保持相同的位置（就像他们在他们的淡入淡出演示中一样http://kenwheeler.github.io/slick/。）

谢谢！

Answer 1

你可以用jQuery做到这一点。淡出第一个div并在回调中淡出第二个div。像这样：http://jsfiddle.net/D2Cw9/

$(".one").fadeOut(500, function() {
    $(".two").fadeIn(500, function() {
    });
});

Answer 2

使用css position absolute将它们设置为相同的位置。

Answer 3

一种解决方案是在两个div上使用相对于容器的绝对定位。

#parts-container {
    position: relative;
}

#part1, #part2 {
    position: absolute;
    left: 0;
    top: 0;
}

Answer 4

在撰写本文时，您有4个答案，这些答案似乎都是使用CSS定位的正确解决方案。我注意到你有jQuery作为标签，所以我认为我提供了一个不同的解决方案。

您是否考虑过不实际隐藏div，并将其替换为另一个？例如，您可以使用jQuery更改div的CSS类：

$('#part1').fadeOut(300, function() {
    $('#part1').addClass('part2');
    $('#part1').innerHTML('Hello2!');
    $('#part1').fadeIn(300, function(){});
});

当然你应该使用同步淡入淡出以确保在隐藏div时发生类更改。

Answer 5

似乎有很多人正确地回答了这个问题。我想补充一点，你也可以保留div，并使用jQuery UI颜色动画将css不透明度设置为0。

我相信这是另一种选择。

Answer 6

尝试向两个位置添加绝对位置并将它们包装在相对div

中

隐藏<div>并在同一位置显示一个新的？</div>

6 个答案: