iSee Dev iSee Dev - 7 months ago 14
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:

$("#showall").click(function(){
$( "#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

Use Slidedown:

$("#showall").click(function(){
  $( "#rules" ).slideDown( 5000, function() {
    // Animation complete.
  });
});

Try this new solution:

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