CODEWITHSUNDEEP
jqueryjquery-animate
MakkyNZ
MakkyNZ

Reputation: 2257

How do I animate changing of div height from the bottom up using jquery

Is there anyway i can animate the changing of a div box height from bottom to top, instead of top to bottom?

This div box is absolute positioned and acts kind of like a curtain to the contents underneath it.

Upvotes: 6

Views: 7937

Answers (3)

carrabino
carrabino

Reputation: 1762

You can achieve this effect by animating the top and height simultaneously. You will simply need to determine the final height.

For example, assuming that you have:

#mydiv{
    top: 200px;
    height: 300px;
    width: 100px;
    background-color: red;
    position: absolute;
};

and you want to end up with the div animated to:

#mydiv{
    top: 0px; /* new top */
    height: 500px; /* new height */
    width: 100px;
    background-color: red;
    position: absolute;
};

jquery code, when you click the div:

$("#mydiv").on("click", function(){
   $('#mydiv').animate( {"top": "0px", "height": "500px" } );
});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

WHY NOT TO USE slideUp() / slideDown() :

'cause it's prone to bugs if multiple / fast mouse actions are registered.
Try in the demo, even using .stop() method you cannot achieve the result like below:

Here is a slight modification using .animate() and height toggling: (just need: position:absolute; bottom:0px; display:none;)

demo 1 (a nice way to do it)

$('.box').hover(function(){
  $(this).find('.curtain').stop().animate({height: 'toggle'});
});

demo 2

Another way is:

var boxHeight = $('.box').innerHeight();  // get element height

$('.curtain').css({top:boxHeight}); // push 'curtain' down

$('.box').hover(function(){
  $(this).find('.curtain').stop().animate({top: 0});  // animate to desired top distance
},function(){
  $(this).find('.curtain').stop().animate({top: boxHeight}); // and on mouseout - back down
});

Upvotes: 5

Manse
Manse

Reputation: 38147

$('div').slideUp();

This uses .slideUp() to animate the div to 0px height from bottom to top

Upvotes: 0

Related Questions