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

Question

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

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

Partially exposed div to slide up when image is clicked

html

javascript

css

jquery

slidetoggle