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?

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

[ . . . ]

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

Answers:

Answer

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

This works if you're happy using CSS3 transitions:

JS:

function animateBar(percentage){
    $('#innerBox').width(percentage+'%');
}

CSS:

#innerBox{transition: 3s}
Answer

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

wthSelected = 85;
$(this).animate({
    width:wthSelected+'%'
  }, 1500); 

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

Answer

Try adding the units text like this:

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

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.

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.