使用 jQuery 实现 SlideUp 效果

Question

我目前正在我的网站上工作

footer

，如果用户单击

Contact Us

，页脚后面就会出现一个黄色的div。

这是我目前正在做的事情，但我似乎无法定位隐藏在页脚后面的黄色框。黄色区域可见时高度约为 300 像素。

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "40px"});
    }
});

footer {
  width:100%;
  display:block;
  background:#ccc;
  position:fixed;
  bottom:0;
  left:0
}

.container {
    overflow:hidden;
    height: 60px;
    float:left;
}
.one {
    position: relative;
    bottom: 0;
    background-color: lightblue;
    z-index: 1;
    cursor:pointer;
    overflow: hidden;
    height: 40px;
}
.two {
    position: relative;
    bottom: 40px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container">
    <div class="two">I slide!<br>And I am higher than the div before me...</div>
</div>

<footer>
  <ul>
  <li><a href="">Privacy Policy</a></li>
  <li><a href="#" class="one">Contact Us</a></li>
  </ul>
</footer>

Answer 1

这是工作幻灯片：

.container {
    overflow: hidden;
    height: 60px;
    float: left;
    position: absolute; /*add this, and */
    bottom: 20px; /* this*//*pixel based on what you wish*/
}

更新的演示：
检查更新小提琴这里

Answer 2

试试这个。它使用 jQuery animate 来滑动。

http://jsfiddle.net/armqc25a/

JS

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".container").animate({"bottom": "0px"});
    }
    else
    {
        clicked=true;
        $(".container").animate({"bottom": "40px"});
    }
});

CSS

footer {
  width:100%;
  background:#ccc;
  position: fixed;
  bottom:0;
  height: 40px;
  left:0;
  z-index: 1000;
}

.container {
    overflow:hidden;
    height: 40px;
    position: absolute;
    bottom:0;
    width: 100%;
    z-index: 1;
}
.one {
    position: relative;
    background-color: lightblue;
    cursor:pointer;
}
.two {
    position: relative;
    background-color: yellow;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
    -o-transition: top 1s;
    transition: top 1s;
}