javascript - Animate jQuery height percentage - Stack Overflow

admin管理员组

文章数量:1336632

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?

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?

• javascript
• jquery
• animation
• jquery-animate

Share Improve this question Follow edited Aug 3, 2012 at 8:51 George asked Aug 3, 2012 at 8:44 GeorgeGeorge 9522 gold badges22 silver badges77 bronze badges 1

• try to change height: "100%" to height: $(this).parent().height(). jQuery has a hard time paring percentages and pixels, so you should do both calculation in pixels. – Tim S. Commented Aug 3, 2012 at 8:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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

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

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

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

There are two ways e to my mind.

First way is your way, i find a ma , 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 ma here
            }, 1000 );
        },
        function() {
            $( "#block-views" ).stop().animate({
                height: "100%"
            }, 1000 );
        }

    );
});​

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

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

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.

本文标签： javascriptAnimate jQuery height percentageStack Overflow