jquery 动画高度， "from bottom to top"，在顶部之前停止

Question

我正在尝试使用 jquery 切换导航容器/div。

我有以下代码

样式.css

#site-navigation {
    position: fixed;
    bottom: 45px;
    left: 30px;
    right: 30px;
    top: 50px;
}
.main-nav-toggle {
    display: none;
    position: fixed;
    bottom:0;
    right:0;
    z-index: 100;
}
.main-nav-toggle .icon {
    background: gray;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 5px 10px;;
    line-height: 1;
    display: inline-block;
    border: 2px solid black;
    border-radius: 5px;
}

和home.html

<div id="site-nav-container">
    <div class="main-nav-toggle">
        <div class="toggle icon"><i class="fa fa-bars"></i></div>
        <a href="#site-navigation" class="screen-reader-text">primary-menu</a>
    </div>
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-test-container">
            <ul id="primary-menu" class="menu">
                <li id="menu-item-1776" class="1776">
                    <a href="#">Level 1</a>
                    <ul class="sub-menu">
                        <li id="menu-item-1778" class="item-1778">
                            <a href="#">Level 2a</a>
                            <ul class="sub-menu">
                                <li id="menu-item-1780" class="item-1780">
                                    <a href="#">Level 3a</a>
                                </li>
                                <li id="menu-item-1779" class="item-1779">
                                    <a href="#">Level 3b</a>
                                </li>
                            </ul>
                        </li>
                        <li id="menu-item-1777" class="item-1777">
                            <a href="#">Level 2b</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>                        
     </nav> <!--#site-navigation-->
</div>

main-toggle.js

jQuery(document).ready(function($){
    $(".main-nav-toggle .icon").click(function(){
        $("#site-navigation").animate({height: 'toggle'}, 1000, function(){
            $('.main-nav-toggle').toggleClass('active');
        });
        return false;
    });
});

几乎按预期工作。

它应该有这样的功能所以容器从下往上会更高。但仍然在距顶部 50px 处停止

img 链接:what it should look like

这是我的第一个 jquery 代码

请对我好一点

Answer 1

或者，作为替代方案，您可以使用方便的 transition 属性让 CSS 处理一切:这对我来说呈现/感觉好多了，因为浏览器不会在计时器上接受外部指令，而是自己计算步骤，这是它能做到的最好方式。

(我还保留了你的切换按钮在动画之后切换“事件”类，但是你的 CSS 中没有规则)

https://jsfiddle.net/svArtist/k293f6bj/

jQuery(document).ready(function($){
    $(".main-nav-toggle .icon").click(function(){
        $("#site-navigation").toggleClass("open");
        setTimeout(function(){
            $('.main-nav-toggle').toggleClass('active');
        }, 1000);
        return false;
    });
});

#site-navigation {
    position: fixed;
    bottom: 10%;
    left: 10%;
    right: 10%;
    background-color:#eee;
    padding:10px;
    border:1px solid #aaa;
    box-sizing:border-box;
    height:0%;
    opacity:0;
    overflow:hidden;
    transition: height 1s, opacity 1s;
}
#site-navigation.open {
  height: 80%;
  opacity:1;
}
.main-nav-toggle {
    position: fixed;
    bottom:0;
    right:0;
    z-index: 100;
}
.main-nav-toggle .icon {
    background: gray;
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 5px 10px;;
    line-height: 1;
    display: inline-block;
    border: 2px solid black;
    border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="site-nav-container">
    <div class="main-nav-toggle">
        <div class="toggle icon"><i class="fa fa-bars">TOGGLEME</i></div>
        <a href="#site-navigation" class="screen-reader-text">primary-menu</a>
    </div>
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-test-container">
            <ul id="primary-menu" class="menu">
                <li id="menu-item-1776" class="1776">
                    <a href="#">Level 1</a>
                    <ul class="sub-menu">
                        <li id="menu-item-1778" class="item-1778">
                            <a href="#">Level 2a</a>
                            <ul class="sub-menu">
                                <li id="menu-item-1780" class="item-1780">
                                    <a href="#">Level 3a</a>
                                </li>
                                <li id="menu-item-1779" class="item-1779">
                                    <a href="#">Level 3b</a>
                                </li>
                            </ul>
                        </li>
                        <li id="menu-item-1777" class="item-1777">
                            <a href="#">Level 2b</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>                        
     </nav> <!--#site-navigation-->
</div>