jQuery animate and property values in percentage

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:

JS:

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

CSS:

#innerBox{transition: 3s}

Related