Animate jQuery height percentage

Question

When I'm trying to animate percentage, it's not animating, but expanding to whole height instantly. I want it to expand to 100%, but smoothly

CSS:

#block-views{
overflow:hidden;
height:20px;
}

HTML:

<div id="block-views">
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    7<br/>
    8<br/>
    9<br/>
    10<br/>
</div>
<a href="#" class="loadmore">Load more</a>

Jquery code:

$(function() {
    $( ".loadmore" ).toggle(
        function() {
            $( "#block-views" ).animate({
                height: "20px",
            }, 1000 );
        },
        function() {
            $( "#block-views" ).animate({
                height: "100%",
            }, 1000 );
        }

    );
});

When I click on load more, it expands to 100% instantly, not smoothly, but when I click on it second time, it decreases size to 20 px smoothly. I tried to watch expanding process in Chrome's inspector tool and I can clearly see that percentage is adding smoothly, but numbers aren't integers, and Chrome doesn't seem to recognize it. How can I solve this?

Answer 1

I think the CSS percentage value is upon the parent node.

so if you want to make this possible you want to add div parent node and set the height off the parent node that i take an example in jsFiddle

Answer 2

I would suggest this post from the JQuery forums would be suitable to your requirements.

http://forum.jquery.com/topic/jquery-animate-with-a-percentage-placed-div

Answer 3

I'm pretty sure that's not legal. You can't mix px and percent - it has no way to convert between them.

Answer 4

There are two ways come to my mind.

First way is your way, i find a comma , mistake here: and need to use position:aboslute; css property. and last thing change your main response functions order.

Here is working jsFiddle.

$(function() {
    $( ".loadmore" ).toggle(
        function() {
            $( "#block-views" ).stop().animate({
                height: "20px"//if you wont use another animate property; dont use comma here
            }, 1000 );
        },
        function() {
            $( "#block-views" ).stop().animate({
                height: "100%"
            }, 1000 );
        }

    );
});​

Structure is like this = .animate( properties [, duration] [, easing] [, complete] )

multiple animate function should be like this: .animate({'height':'20px','width':'20px'},1000);

------------------------------------------------------------

Second way is my way, you can add +20px height for every click:

Here is jsFiddle

$(function() {
    $( ".loadmore" ).click(function() {
        $("#block-views").animate({'height':'+=20px'},1000);
    });
});​

Answer 5

I've found a solution for this problem (sorry for being late). What you need to do is to make additional wrapper inside #block-views element, which will have actual height information:

<div id="block-views"> //height is 20px now
 <div class="wrapper"> //has its full height in px
  1<br/>
  2<br/>
  3<br/>
  4<br/>
  5<br/>
  6<br/>
  7<br/>
  8<br/>
  9<br/>
  10<br/>
 </div>
</div>

Now in javascript you can pass .wrapper height to animate() function:

$('#block-news').stop().animate({'height': $('#block-news .wrapper').height()}, 1000);

Worked for me. For toggle you can add new variable and store initial height (20px) there.