jquery - 下からdivをスライド

Question

HTML ページ内で垂直方向と水平方向の中央に配置された 640x480 の div があります。divの下端からdivを表示したい。そのdivを640x400にしたい。基本的に、元の div の上位 80 ピクセルが表示されます。

私の質問は、中央の 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>

J:

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

Answer 2

これが実用的なフィドルです。

基本的：

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

Answer 3

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

フィドル