1 
<!DOCTYPE html>
<html>

    <head>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function (e) {
                e.preventDefault;
                $("a").click(function (event) {
                    var url = $(this).attr('href');
                    event.preventDefault();
                    $("#bg").slideDown(1000, function () {
                        $("#content").hide().load(url + ' #content', function () {
                            $("#bg").slideUp(1000);
                            $(this).show();
                        });
                    });
                });
            });
        </script>
        <style>
            nav ul li {
                display: inline;
                padding: 0px 20px;
                text-decoration: none;
            }
            #bg {
                position: fixed;
                top: 100px;
                transition: all 2s;
                background-color: gray;
                z-index:25;
                width: 100%;
                height: 500px;
                display: none;
            }
        </style>
    </head>

    <body>
        <div>
                <h2>DEMO</h2>

            <nav>
                <ul>
                    <li>
                        <a href="first.html#content">First</a>
                        <li>
                            <a href="second.html#content">Second</a>
                            <li>
                                <a href="third.html#content">Third</a>
                </ul>
            </nav>
            <div id="all">
                <div id="bg"></div>
                <p id="content">banna third Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
                    erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
                    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
                    accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
                    augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
                    nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
                    facer possim assum. Typi non habent claritatem insitam; est usus legentis
                    in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores
                    legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,
                    qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera
                    gothica, quam nunc putamus parum claram, anteposuerit litterarum formas
                    humanitatis per seacula quarta decima et quinta decima. Eodem modo typi,
                    qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
            </div>
        </div>
    </body>

</html>

私はいつか別の質問を投稿しました

カーテン アニメーションの部分は解決しましたが、コンテンツを動的に変更できません

さらに 2 つの html ファイル second.html と third.html があります

内容が変わる前に幕が下りる必要がある

カーテンがテキストをビューから隠した後、コンテンツを変更する必要があります

コンテンツが変更された後、カーテンを上げて新しいコンテンツを表示する必要があります

4

0 に答える 0