Question

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

这是剧本：

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

    <!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>

＆＃13;

任何帮助表示赞赏。谢谢:)）

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

1 个答案: