Tim Marshall Tim Marshall - 6 months ago 27
Javascript Question

JQuery .animate(); not working with fixed height

I've worked with this many times and have had no problem. Animating the height and/or width of a DIV either by

width/height: 'toggle'
or replacing
'toggle'
with specified width/height.

setTimeout( function(){
$('.input-group .Advanced').animate({
height: 'toggle'
}, {
duration: 500,
});
} , 500);


height: 'toggle'
- Demo on JSFiddle

height: '400px'
 - Demo on JSFiddle

The code snippet works perfectly fine however I need this to be set to a specific height and replacing my
'toggle'
to a fixed height such as
'400px'
does absolutely nothing...

Answer

your given height is not working because you have set a display:none to your .advance class. When you use jquery inbuilt toggle string it will take care of that and make your hidden element in view.But, when you define your own height you also have to display that element in view otherwise animation will work but not display. You can refer Jquery animate() reference .It's written there

Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.

You can do this to animate your class

setTimeout( function(){
        $('.input-group .Advanced').animate({
           height: '500px',
          opacity:'show'
        }, {
            duration: 500
        });
    } , 500);

This will get your hidden element in view.Demo of your code

Comments