CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animate
George
George

Reputation: 95

Animate jQuery height percentage

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?

Upvotes: 3

Views: 12073

Answers (5)

Артур Пипченко
Артур Пипченко

Reputation: 454

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.

Upvotes: 0

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

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);
    });
});​

Upvotes: 0

whytobe
whytobe

Reputation: 163

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

Upvotes: 1

Ariel
Ariel

Reputation: 26753

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

Upvotes: 0

Ryan McDonough
Ryan McDonough

Reputation: 10012

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

Upvotes: 0

Related Questions