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

而不是$('#start').click(function() { $('#nav').animate({bottom: "0px"}, 1200); });你应该使用

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

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

为了获得更平滑的结果，请检查velocity.js（http://julian.com/research/velocity/），它通过与浏览器框架更新同步来实现更平滑的动画。

JsFiddle：http://jsfiddle.net/11r46jnm/

您也可以使用CSS转换执行此操作。对于这样的东西，我喜欢将我的CSS挂钩到HTML上的数据属性：

$('#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);
});

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

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

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

 #nav {
      transition: bottom 1.2s ease;
 }

最后，我们使用CSS来设置两个状态的位置，并确保过渡平稳。 CSS转换比jQuery有更好的性能，所以我建议你使用它们：

 public partial class MyContext : DbContext, IMyContext
{
    static MyContext()
    {
        System.Data.Entity.Database.SetInitializer<MyContext>(null);
    }

    public MyContext()
        : base("Name=MyContext")
    {
    }

有关演示的信息，请参阅此jsFiddle：http://jsfiddle.net/Lv2saepy/1/

部分曝光的div在单击图像时向上滑动

1 个答案: