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;
}

Fiddle

Answer 3

Here's a working fiddle.

基本上：

<强> 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);
});

从底部滑动div

3 个答案: