Jquery 页面过渡效果正在影响下面的所有 div

Question

我正在按照教程创建平滑的页面过渡。它工作正常，但每当我尝试在有效果的下方添加一个新的 div 时，它也会产生效果。

这是脚本：

$(function() {
    var request = window.location.hash;
    if(request == '#page-2') {
        $('.page.current').removeClass('current');
        $('.page').eq(1).addClass('current');
    }
    $('nav a').click(function(){
        var speed = 200;
        var i = $(this).index();
        $('.page.current').animate({opacity: 0, marginTop:80},speed,function(){
            $(this).removeClass('current');
            $('.page').eq(i).css('marginTop',30).animate({opacity:1,marginTop: 50},speed).addClass('current');
        });
    });
});

这是页面的 html 和 css（页脚是 div 有问题）。

html {
    overflow-y:scroll;
}

body > div, nav {
    width:640px;
    margin:auto;
    margin-top:50px;
}

.page {
    display:none;
    opacity:0;
}
.page.current {
    display:block;
    opacity:1;
}

    <!doctype html>
    <html lang=lipsum>
    <head>
        <meta charset=utf-8>
        <title>smooth page transition</title>
        <link rel=stylesheet href='style.css'>
    </head>
    <body> 
        <nav>
            <a href='#page-1'>first page</a>
            <a href='#page-2'>second page</a>
        </nav>
        <div class='page current'>
           page1
        </div>
        <div class='page'>
           page2
        </div>
 <div id='footer'>
THIS GETS THE SAME EFFECT!!!
 </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
    </html>

感谢任何帮助。谢谢:)

Answer 1

这是你的代码，我只修改了你代码中的一行，希望是你想要的。谢谢，威利
PS:我刚锁定你的位置，请修改你左边的px其他。

           ===========================================================================
             <!--   <div class='page current' STYLE="position:absolute;left:500px;">-->
           ===========================================================================


        <!doctype html>
        <html lang=lipsum>
        <head>
            <meta charset=utf-8>
            <title>smooth page transition</title>
            <link rel=stylesheet href='style.css'>
 <style>
           html {
        overflow-y:scroll;
    }

    body > div, nav {
        width:640px;
        margin:auto;
        margin-top:50px;
    }

    .page {
        display:none;
        opacity:0;
    }
    .page.current {
        display:block;
        opacity:1;
    }
       </style>
        </head>
        <body>
            <nav>
                <a href='#page-1'>first page</a>
                <a href='#page-2'>second page</a>
            </nav>
            <div class='page current' STYLE="position:absolute;left:500px;">
                page1
            </div>
            <div class='page'>
                page2
            </div>
            <div id='footer'>
                THIS GETS THE SAME EFFECT!!!
            </div>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
            <script src="script.js"></script>
            <input type="text" value="aa" />

        </body>
    </html>
    <script>
        $(function () {
            var request = window.location.hash;
            if (request == '#page-2') {
                $('.page.current').removeClass('current');
                $('.page').eq(1).addClass('current');
            }
            $('nav a').click(function () {
                var speed = 200;
                var i = $(this).index();
                $('.page.current').animate({ opacity: 0, marginTop: 80, opacity: 0, marginBottom: 100 }, speed, function () {
                    $(this).removeClass('current');
                    $('.page').eq(i).css('marginTop', 30).animate({ opacity: 1, marginTop: 20 ,opacity: 1, marginBottom: 70 }, speed).addClass('current');
                });
            });
        });

    </script>

Jquery 页面过渡效果正在影响下面的所有 div

Jquery page transition effect is affecting all divs underneath

html

css

jquery

transition

web