Geek asks and answers

How to change div height animation from bottom to top using jquery

In any case, can I animate the change in the height of the window div from bottom to top, and not top to bottom?

This div field is absolutely positioned and acts like a curtain for the content below it.

+5
source share
3 answers

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

', because it is prone to errors when registering multiple / quick mouse actions.
Try in the demo, even using the method .stop(), you cannot achieve the result, as shown below:

That is a slight modification of using .animate()and height adjustable (just need to: position:absolute; bottom:0px; display:none;)

demo 1 (a good way to do this)

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

demo 2

Another way:

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
});
+4
$('div').slideUp();

. slideUp(), div 0px height

0

You can achieve this effect while animating the top and height. You just need to determine the final height.

For example, if you have:

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

and you want to end with an animated div:

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

jquery code when you click div:

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

More articles:


All Articles