单击图像时部分暴露的 div 向上滑动

Question

这可能很奇怪，但我想做的是当有人单击图像时，让一个 div 从屏幕底部向上滑动。为了更清楚地描绘这一点，想象一下 Windows 桌面，如果单击开始菜单图像/图标，而不是从按钮弹出开始菜单，整个开始菜单栏会向上滑动，露出整个 div。

我现在正在做的事情（请原谅我刚刚从 codecademy 学习了 JS 和 jQuery）正在使用 slideUp 函数。但是，这会导致 div 向下滑动而不是向上滑动，从而暴露整个 div。目标是，当您单击按钮时，div 会向上滑动，如果您再次单击按钮（或 div 之外的任何位置），它将向下滑动，使顶部 60px 像以前一样暴露。

这是我的 JS/jQuery 代码：

$('#start').click(function() {
$('#nav').slideUp('slow');
});

我的 HTML

<div id="nav" class="nav">
    <img id="start" src="img/btn_start.png">
</div>

我的 CSS

* {
    padding: 0px;
    margin: 0px;
}

body {
    width: 100%;
    font-family: Helvetica;
}

.nav {
    width: 100%;
    min-width: 100%;
    height: 500px;
    background: #000;
    color: #fff;
    position: absolute;
    bottom: -440px;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    overflow: auto;
 }

.nav ul li {
     display: inline;
}

 .nav li {
     padding: 20px;
     margin-top: 80px;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
 }

 #start {
    float: left;
 }

谢谢，我希望这不是太荒谬。

Answer 1

您应该使用 slideUp 而不是

$('#start').click(function() {   
    $('#nav').animate({bottom: "0px"}, 1200);   
});

...将从当前位置平滑动画直到底部为 0px（即与包含元素的底部对齐）。

要获得更流畅的结果，请查看velocity.js (http://julian.com/research/velocity/)，它通过与浏览器框架更新同步来制作更流畅的动画。

JsFiddle 在这里：http://jsfiddle.net/11r46jnm/

您也可以使用 CSS 过渡来代替。对于这样的东西，我喜欢将我的 CSS 挂钩到 HTML 的数据属性中：

<div id="nav" class="nav" data-nav-state="collapsed">
    <img id="start" src="img/btn_start.png">
</div>

...使用javascript更改属性...

$('#start').click(function() {
    //toggle the nav element between two states
    var currentState = $('#nav').attr("data-nav-state");
    var newState = "collapsed";
    if ( currentState === "collapsed" ) {
        newState = "expanded";
    } 
    $('#nav').attr("data-nav-state", newState);
});

最后我们使用 CSS 来设置两个状态的位置，并保证过渡是平滑的。 CSS 过渡比 jQuery 有更好的性能，所以如果可以的话，我建议使用它们：

 #nav[data-nav-state=collapsed] {
      bottom: -440px;
 }

 #nav[data-nav-state=expanded] {
      bottom: 0px;
 }

 #nav {
      transition: bottom 1.2s ease;
 }

查看这个 jsFiddle 的演示：http://jsfiddle.net/Lv2saepy/1/