Does width in percentage % help performance in an animation?

Question

If I have a parent div with fixed width and children divs,

<div id="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

.

#parent {
    width:100px;
}

and I want to animate the parents width (so the children's width will also be animated).

Is it better for performance to have percentage widths for the children:

.children {
    width:25%;
    float:left;
}

and one animated element:

$('#parent').animate({
    width : 0
}, 1000);

or having fixed width for the children (note the px):

.children {
    width:25px;
    float:left;
}

and animating all the divs:

$('#parent,.children').animate({
    width : 0
}, 1000);

or it doesn't matter at all as in the end everything will be resized some way or another?

score 0 · Answer 1 · answered Jun 25 '13 at 13:55

The size unit you use has no effect on the performance of your animation.

However if you really are concerned about performance you should concider using css3 transitions instead of jQuery (more infos here : http://dev.opera.com/articles/view/css3-vs-jquery-animations/).

Anyway, I doubt the performance gain would be noticeable in your case.

Does width in percentage % help performance in an animation?

1 Answers1