Jquery内容跳转

我正在努力实现以下目标。我想要两个不同的div之间的淡入淡出动画。动画制作成功。只有当一个div淡出时，淡入div的内容才会跳下。我认为这是一个动画时间的问题

 $('#btn').click(function () {
     $('#services').fadeOut('slow', function(){
         $('#prices').fadeIn('slow'); 
         });

    if ($('#services').is(':visible')) {
        $('#services').fadeOut('slow');
        $('#prices').fadeIn('slow')
        $('#btn').html('Services');
    } else {
        $('#btn').html('Prices');
        $('#prices').fadeOut('slow');
        $('#services').fadeIn('slow')
    }
});

---

我在网上找不到任何解决办法。这是我的

您需要将第二个淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入。另外，如果缓存jquery元素会更有效，因为我们要多次重用它

---

最简单的解决方案是在淡出后运行淡出，如下所示：

 $('#btn').click(function () {
     $('#services').fadeOut('slow', function(){
         $('#prices').fadeIn('slow'); 
         });

    if ($('#services').is(':visible')) {
        $('#services').fadeOut('slow', function(){
            $('#prices').fadeIn('slow');
        });
        $('#btn').html('Services');
    } else {
        $('#btn').html('Prices');
        $('#prices').fadeOut('slow', function(){
            $('#services').fadeIn('slow');
        });
    }
});

参见小提琴：

另一种方法是通过CSS将其中一个div设置为绝对：

#services {
    width: 100%;
    height: auto;
    background: yellow;
    position: absolute;
    top: 0;
    left: 0;
}

---

这将产生一个更平滑的动画，但如果div的高度不同，就不那么容易了。

您未能发布代码，创建一个fiddle是的，我必须找出如何将fiddle实现到post中。。需要添加一些示例代码以使链接被接受。将淡入淡出/淡出设置为完整

#services {
    width: 100%;
    height: auto;
    background: yellow;
    position: absolute;
    top: 0;
    left: 0;
}