iSee Dev iSee Dev - 1 year ago 85
Javascript Question

How to open div slowly using animation jquery

Can someone help how to slowly open div to his full size;

What i have:

rules div with HEIGHT 200px and overflow-y:hidden.

when press button #showall i need slowly make #rules height to his 100% !!

what i tried:

$( "#rules" ).animate({
height: "+=100px"
}, 5000, function() {
// Animation complete.

in my example height; +=100px - its work normally, but if i change to height: "100%" its open div FAST without Animation

Answer Source

Use Slidedown:

  $( "#rules" ).slideDown( 5000, function() {
    // Animation complete.

Try this new solution:

$this= $("#rules");
 var currentHeight =  $this.height();
        autoHeight = $this.css('height', 'auto').height()
        $'height', currentHeight)
                                        height: autoHeight},
                                        function() { $(this).addClass('open'); });