javascript - 单击图像时部分暴露的 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/