Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
}
like image 527
haunted85 Avatar asked Jul 29 '11 17:07

haunted85


4 Answers

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

like image 117
Fede Avatar answered Nov 07 '22 00:11

Fede


This works if you're happy using CSS3 transitions:

JS:

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

CSS:

#innerBox{transition: 3s}
like image 26
Caedmon Avatar answered Nov 07 '22 00:11

Caedmon


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);
like image 23
A. Canyon Avatar answered Nov 06 '22 23:11

A. Canyon


Try adding the units text like this:

function animateBar(percentage)
{
    $('#innerBox').animate({width: percentage+"px"}, 3000);
}
like image 2
Sebastian Perez Avatar answered Nov 07 '22 00:11

Sebastian Perez