Jquery淡入淡出内容跳转

Question

我正在努力实现以下目标。我想要两个不同的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')
    }
});

我在网上找不到任何解决方案。这是我的http://jsfiddle.net/z7E3A/4/

Answer 1

您需要将第二个淡入淡出操作放入第一个淡出操作的完整函数中。此外，如果缓存jquery元素会更有效率，因为我们会多次重用它

http://jsfiddle.net/z7E3A/7/

var btn = $('#btn');
var service = $('#services');
var price = $('#prices');

btn.click(function () {
     service.fadeOut('slow', function(){
         price.fadeIn('slow'); 
     });

    if (service.is(':visible')) {
        service.fadeOut('slow', function(){
            price.fadeIn('slow');
            btn.html('Services');
        });

    } else {
        price.fadeOut('slow', function() {
            service.fadeIn('slow');
            btn.html('Prices');
        });

    }
});

Answer 2

最简单的解决方案是在fadeOut之后运行fadeIn，如下所示：

 $('#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');
        });
    }
});

请参阅小提琴：http://jsfiddle.net/z7E3A/5/

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

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

这将导致一个更平滑的动画，但如果div的高度不同，则不会那么容易工作。