jQuery animate and property values in percentage

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?


[ . . . ]

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



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

This works if you're happy using CSS3 transitions:


function animateBar(percentage){


#innerBox{transition: 3s}

This is pretty old, but this way is working for me:

wthSelected = 85;
  }, 1500); 

Also i'm using jquery-1.11.2.min.js and jquery.mobile-1.4.5.min.js


Try adding the units text like this:

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

It may be that you're allowing 2 decimal points to the percentage. Have you tried using an integer value instead? I'm not sure all browsers support floating percentages.

Also, make sure $('#innerBox') has a set width to begin with. It doesn't have to be a percentage. It just has to be set in CSS or through a JS method.


If it's in percentage then try this one here

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

we're using a css property here so don't forget the single quotes, so it should be 'width' not width


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.