從底部滑動div

Question

我有一個640x480 div，它在我的HTML頁面中垂直和水平居中。我想要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); 
});