Question

我正在尝试进行导航，点击您想要的内容（例如关于页面），当前页面将淡出，并且about页面会淡入。

我遇到的问题是，当div被定位为相对时它会有一种“跳跃”动画，因为第一个div将慢慢fadeOut并最终完全隐藏现在新div跳转到旧的位置div是。

只需点击框即可看到下一个框跳转

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

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

Answer 1

您可以使用fadeOut完整回调，以便在外出完成时调用您的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 /

使用Jquery在fadeIn相对div时平滑过渡

3 个答案: