jquery - 从底部滑动 div

Question

我有一个 640x480 的 div，它在我的 HTML 页面中垂直和水平居中。我希望 div 从 div 的底部边缘出现。我希望该 div 为 640x400。本质上，可以看到原始 div 的顶部 80px。

我的问题是，如何让新 div 从居中 div 的底部边缘出现？

Answer 1

我没有你的 css 但是，我建议你让你的中心 div 位置：相对；然后你让 div 那应该是绝对的动画。此处带有动画的工作示例 http://jsbin.com/iqewuh/3/edit css：

#i {
  width:640px;
  height:480px;
  background:red;

  position:relative;
}

#y {
  position:absolute;
  background:green;
  bottom:0;
  width:640px;
}

html:

<div id="i">
    <div id="y"></div>
</div>
<a href="#!" id="animate">Animate</a>

JS：

$(document).ready(function() {
  $("#animate").click(function() {
    $("#y").animate({
      height: '+=400'
    }, 5000);
  });
});

Answer 2

html:

<div id="div1">
   <div id="div2"></div>
</div>

CSS：

#div1 {
   position:relative;
   width:640px;
   height:480px;
   background-color:blue;
}

#div2 {
   position:absolute;
   bottom:0;
   height:400px;
   width:640px;
   background-color:red;
}

小提琴

Answer 3

这是一个工作小提琴。

基本上：

HTML

<div id="red">
    <div id="blue"></div>
</div>

CSS

#red {
  position:relative;
  width:640px;
  height:480px;
  background:#FF0000;
  overflow:hidden;
}

#blue {
  position:absolute;
  top:480px;
  width:640px;
  height:400px;
  z-index:1;
  background:#0000FF;
}

JS

$('document').ready(function() {
    $('#blue').animate({top : 80 }, 1000);
});