Question

我创建了一个带有边框的网站，可以在.click上使用#logo制作动画，以显示页面顶部的导航。再次单击此选项后，边框将动画回原始状态，隐藏导航。

当我想要转到下一页时，我遇到了一个小问题..当我点击#logo来触发jQuery动画，然后点击导航中的一个列表项转到下一页，我的动画边框的状态在进入页面时回到原始状态，没有动画。

我想让边框动画回来，隐藏导航，然后我转到下一页进行平滑过渡，但我不知道如何做到这一点。（我还是初学者）

这是两个动画进出边界状态的截图：

以下代码有效，但我不知道接下来要做什么来实现我的目标。

由于

    <!DOCTYPE html>
    <html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <style>
            *, *:after, *:before {
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            body, html {
                background: #f7f7f7;
                font-family: 'Noto Sans', sans-serif;
                padding:0;
                margin:0;
                overflow:hidden;
            }
            /********************** Border **********************/
            /****************************************************/
            #top, #bottom, #left, #right {
                background: #00ffa3;
                opacity: 0.95;
            }

            #left, #right {
                position: fixed;
                top: 0; bottom: 0;
                width: 10px;
            }

            #left { 
                left: 0;
                z-index: 10; 
            }

            #right { 
                right: 0;
                z-index: 10; 
            }

            #top, #bottom {
                position: fixed;
                left: 0; right: 0;
                height: 10px;
                z-index: 0;
            }

            #top { 
                top: 0;
                z-index: 10; 
            }

            #bottom { 
                bottom: 0;
                z-index: 10; 
            }
            /*********** border activate & close ****************/
            /****************************************************/
            #logo {
                position: fixed;
                z-index: 99;
            }
            #logo img {
                margin: 1.563em;
                width: 2.1em;
                height: 2em;
            }

            #header {
                height: 7.5em;
                z-index: 10;
            }
            /******************** navigation ********************/
            /****************************************************/

            nav {
                position: fixed;
                margin-left: auto;
                margin-right: auto;
                left: 0;
                right: 0;
                text-align:center;
                z-index: 99;
                width: 500px ;
                display: none;
            }

            nav li{
                display:inline;
            }
            nav ul{
                padding: 0px;
            }
            nav a { 
                display:inline-block;
                font-size: 1em;
                font-weight: bold;
                color: #000;
                margin: 1.563em;
                text-transform: uppercase;
                text-decoration: none;
            }

    </style>

    <script>
            $(document).ready(function(){
                $( "#logo" ).click(function() {
                    // deze gaat naar binnen.
                    if ($("#logo").hasClass("naarBinnen")) {
                        $( "#right, #left").animate({
                            width: ["7.5em","easeInOutExpo"]
                        }, 1000 );

                        $("#bottom, #top" ).animate({
                            height: ["7.5em","easeInOutExpo"]
                        }, 1000 );

                        $( "#wrapper, #wrapper2").animate({
                            width: ["80%","easeInOutExpo"],
                            height: ["70%","easeInOutExpo"]
                         }, 1000, function () {
                            $("#logo").removeClass("naarBinnen");
                            $("#logo").addClass('naarBuiten');
                         });

                        $('nav').delay(500).fadeIn('slow');

                    // deze gaat naar buiten. 
                    } else if($("#logo").hasClass("naarBuiten")) {
                        $( "#right, #left").animate({
                            width: ["10px","easeInOutExpo"]
                        }, 1000 );

                        $("#bottom, #top" ).animate({
                            height: ["10px","easeInOutExpo"]
                        }, 1000 );

                        $( "#wrapper, #wrapper2").animate({
                            width: ["90%","easeInOutExpo"],
                            height: ["85%","easeInOutExpo"]

                         }, 1000, function () {
                            $("#logo").removeClass("naarBuiten");
                            $("#logo").addClass('naarBinnen');
                         });

                        $('nav').fadeOut('slow');
                    }
                });
            })
    </script>

    </head>
    <body>
        <div id="fullpage">
            <div id="logo" class="naarBinnen">
                <img id="logo"src="img/toggle.png">
            </div>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

            <div class="section active" id="section0">
                <div id="wrapper"> 
                    <div class="main_text">
                        <p style="  text-align: center;">
                            <!--
                            Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. -->
                        </p>
                    </div>
                </div>
            </div>

        <!-- borders --> 
            <div id="left"></div>
            <div id="right"></div>
            <div id="top"></div>
            <div id="bottom"></div>

        </div>
    </body>
    </html>

Answer 1

您需要使用动画方法的回调函数（下面的完整参数）：

.animate( properties [, duration ] [, easing ] [, complete ] )

当您点击徽标时，如果是<a>链接，您必须阻止该事件（使用：e.preventDefault()）停止重定向。然后制作动画，并在动画和动画中调用回调函数，然后手动将用户重定向到window.location.href = url; //<- your url

如果您想了解更多信息，请提供您的HTML。

编辑：

我看到你已经有了一个回调函数。所以这样做：

将$( "#logo" ).click(function() {更改为$( "#logo" ).click(function(e) {
在else{}通过e.preventDefault()停止重定向来停止当前事件
在您的回调函数中，进行重定向：window.location.href = url; //<- your url

EDIT2：现场实施：

http://jsfiddle.net/b4paabuo/1/

Answer 2

只是为了让你开始......你会想要利用两件事，如果#logo是一个（锚点）元素，则首先阻止点击的默认操作例如evt.preventDefault（）;

then, do all your code to add remove classes, kicking of transitions that you listed above

finally, use setInterval to do a callback after the animation finishes, to change the url  
   e.g.  return setTimeout( function(){window.location.href = 'YOUR URL' } , 1000 );

进入下一页之前的jQuery动画

2 个答案: