使用Jquery实现渐变时的平滑过渡

Question

我想做一个导航，你点击你想要的东西(比如关于页面)，当前页面会淡出，关于页面会淡出。

我遇到的问题是，当div相对定位时，它会有一种"跳跃"动画，因为第一个div会慢慢淡出，最终完全隐藏，现在新的div跳到旧div所在的位置。

这是我意思的概要。http://jsfiddle.net/285d2x9v/

点击方框，你会看到下一个方框跳转

$('.index').click(function(){
        $(this).fadeOut();
        $('.about').fadeIn();
    });

是我的基本方法，因为我想要一个隐藏div的动画。有更好的办法吗?

Answer 1

您可以使用fadeOut完整回调，以便在out完成时调用fadeIn

代码:

$(document).ready(function () {
    $('.about').hide();
    $('.index').click(function () {
        $(this).fadeOut(400, function () {
            $('.about').fadeIn();
        });
    });
    $('.about').click(function () {
        $(this).fadeOut(400, function () {
            $('.index').fadeIn();
        });
    });
});

演示:http://jsfiddle.net/IrvinDominin/segr6z4o/

Answer 2

这样做的一种方法是…

     $('.index').click(function(){
        $(this).fadeOut(200, function() {
            $('.about').fadeIn();
        });
    });
    $('.about').click(function(){
        $(this).fadeOut(200, function(){
            $('.index').fadeIn();
        });
    });

代码说明…$(selector).[animation]([animation duration], [callback]);

回调函数是在当前动画完成后执行的函数。你可以随意修改持续时间。请记住，持续时间的单位是毫秒。

Answer 3

我已经修改了Jsfiddle以达到预期的结果，主要思想是使用绝对定位堆叠元素，然后当您单击元素时，我们可以避免像您描述的那样跳入效果。

jsfiddle.net/285d2x9v/5/