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

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() {
    });
});