jquery动画高度，“从下到上”，在顶部之前停止答案

【问题标题】：jquery animate height, "from bottom to top", stop before topjquery动画高度，“从下到上”，在顶部之前停止
【发布时间】：2015-05-27 17:16:19
【问题描述】：

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

我有以下代码

style.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 处停止

图片链接：what it should look like

这是我的第一个 jquery 代码

请客气

【问题讨论】：

所以你想让菜单在你按下按钮时从底部向上动画？如果您为高度设置动画，它将向下而不是向上设置动画。你能做一个小提琴或 plunkr 来演示这个问题吗
这里是一个带有代码link 的活动域的链接，您必须将浏览器的宽度调整到 480 像素以下才能看到带有 .js 的导航栏功能，但是是的，我想要当我按下按钮时菜单从底部向上动画我可以在小提琴上工作需要一些时间以前没有做过
既然我已经看到了现场示例，您就不需要做任何事情了。动画高度不足以完成这项工作。您必须为高度和顶部值设置动画以使菜单保持在原位。这样菜单会变小，但它的底部会保持在同一个地方。我会尝试做一个简单的 plunkr 并发布答案

标签： jquery html css animation navigation

【解决方案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>

【讨论】：

我真的认为这是一个，但因为 css 转换在旧浏览器中不支持我真的想删除它们，这可能吗？我真的不需要不透明度，我已经把它去掉了，但是我只剩下一个封闭的小容器了？
坦克我在你的帮助下找到了解决方案 :)

【解决方案2】：

这是我认为你想要的一个有效的 plunkr：http://plnkr.co/edit/ZZyokGfziUD0jgVEGIXf

基本上，当菜单打开时，您还需要移动偏移量以使其位置保持在底部。

(function($){
  var $menu = $('.menu');
  var $button = $('.button');

  var openMenu = function(){
    $menu.data('open', true);

    $menu.animate({
      height: '400px',
      bottom: '50px'
    });
  };

  var closeMenu = function(){
    $menu.data('open', false);
    $menu.animate({
      height: 0,
      bottom: '50px'
    });
  }

  var animateMenu = function(){
    if($menu.data('open')){
      closeMenu();
    } else{
      openMenu();
    }
  };

  $button.on('click', animateMenu);
})(jQuery);

【讨论】：

【解决方案3】：

感谢 Ben Philipp 找到解决方案和其他时间

[jsfiddle][1]

https://jsfiddle.net/BugiBH/uk1j9cdw/

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

#site-navigation {
    position: fixed;
    bottom: 10%;
    left: 10%;
    right: 10%;
    background-color:#eee;
    padding:0px;
    display : none;
    box-sizing:border-box;
    height:80%;
    overflow:hidden;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

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



jQuery(document).ready(function($){
    $(".main-nav-toggle .icon").click(function(){
        $("#site-navigation").animate({height: 'toggle'}, function(){
            $('.main-nav-toggle').toggleClass('active');
        });
        // Optional return false to avoid the page "jumping" when clicked
        return false;
    });
});

【讨论】：