使用jQuery进行UI / DOM排序

So, I have scoured the internet to find help on this...

I have a bar graph where the bars/values are sorted left to right with the largest value on the left. Based on user interaction, the bar graphs/values may change and, for instance, the middle bar may need to move 1 or more spots to the left. This has to be done on the fly, without removing the DOM element because I need to animate the left to right movements... this is for user appeal, something that is very important to the project.

So, I guess my question is, since you can't resort DOM elements and animate them at the same time, how can you track the movement. I've toyed with the idea of creating an initial index of the graph as the page loads and updating the index as changes are made. Logically, I have a hard time with this. Also, if one were to do that, whats the best way to index, using the data attribute? Isn't this only HTML5 and possibly unsupported in older browsers, or does jQuery keep a cache that has nothing to do with HTML5?

I'm fairly new to javascript/jQuery. I would say I've been using it for 2 years but I've ever really only done small jQuery animations and validation. Would really love some input form the community!

Thank you!

You're right, you can't animate elements by sorting.

The knack is to position the bars within the graph space with CSS properties, eg. left or margin-left.

Then you have something that, when changed in the right way, will give an animated effect.

All you need to do is to loop through each bar in turn, calculate its new CSS left/margin-left property and use jQuery's .animate() to cause it to slide into its new position.

Assuming that the bars to be positioned with margin-left and that the height of the bars also needs to be changed, then the general form of the jQuery will be :

$(".bars").each(function(i, bar) {
    var $bar = $(bar);
    var marginLeft = ........;//expression that calculates or fetches the new margin-left property for bar i
    var height = ........;//expression that calculates or fetches the new height property for bar i
    $bar.animate({
        'margin-left': marginLeft,
        'height': height
    );
})

There's no need to sort anything or to use the data attribute.