CODEWITHSUNDEEP
jqueryhtmlcss
user70192
user70192

Reputation: 14224

slide div from bottom

I have a 640x480 div that is centered vertically and horizontally within my HTML page. I want a div to appear from the bottom edge of the div. I want that div to be 640x400. Essentially, the top 80px of the original div can be seen.

My question is, how do I make that new div appear from the bottom edge of the centered div?

Upvotes: 0

Views: 131

Answers (3)

VVV
VVV

Reputation: 7603

Here's a working fiddle.

Basically:

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

Upvotes: 0

Konstig
Konstig

Reputation: 135

I dont got your css but, i recomend you to make your center div position:relative; then you make the div thats should be animated absolute. Working example with animation here 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);
  });
});

Upvotes: 1

Sammy
Sammy

Reputation: 3099

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

Upvotes: 0

Related Questions