jQuery animate and property values in percentage

javascript jquery jquery-animate
haunted85 picture haunted85 · Jul 29, 2011 · Viewed 23.7k times · Source

I trying to animate a div and I try to use some value retreived somewhere else, I know the value to be correct because I've printed out the output... so I'm wondering why doesn't it work properly?

animateBar(percentage.toFixed(2)+'%');

[ . . . ]

function animateBar(percentage)
{
    $('#innerBox').animate({width: percentage}, 3000);
}

Answer

Alexis Canyon picture Alexis Canyon · Oct 17, 2012

It seems as though theres a bug with using a percentage with animate. http://bugs.jquery.com/ticket/10669

I would suggest calculating the number of pixels to add yourself, something like this may work:

percent = 0.25;
add_width = (percent*$('#innerBox').parent().width())+'px';
$('#innerBox').animate({'width': '+='+add_width}, 3000);

Related questions

jQuery animate backgroundColor

I am trying to animate a change in backgroundColor using jQuery on mouseover. I have checked some example and I seem to have it right, it works with other properties like fontSize, but with backgroundColor I get and "Invalid Property" …

Read More
animating addClass/removeClass with jQuery

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over …

Read More
Animate element to auto height with jQuery

I want to animate a <div> from 200px to auto height. I can’t seem to make it work though. Does anyone know how? Here’s the code: $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });

Read More