How to reduce load when fading in multiple elements in jQuery

Question

I have a dynamic order page which has to update multiple elements when a value is changed.

Here is the main function that does that. Note it only updates the values if they are different from what is already there. So for example it doesn't update with a checkmark, if there already is a check mark there.

 function reput(element, content, animate) {
 target = $(element);
 target_check = target.html().indexOf("check_mark");
 //checks if target already has a check mark
 content_check = content.indexOf("check_mark");
 //checks if new value has check mark
 th = target.html();
 if(th == content || (target_check == content_check && target_check != -1)) {
 return true;
 //if any of the values match, then don't do anything 
 }
 else {
 //values didn't match so update the element
 if (animate || animate == undefined)
 target.fadeOut(100).empty().fadeIn(200).append(content);
 else
 target.empty().append(content);
 }
 }

This function is called multiple times in several places like so:

reput(("#email"), (cp.email));
reput(("#chat"), (cp.chat));
reput(("#voice"), (cp.voice));
reput(("#member"), (cp.member));
reput(("#price"), ('$' + cp.price), false);

What would be the best way to improve the load time of this function? Having it accept an array, iterating through it and appending the values one by one? Would it save resources to just use fadeIn instead of fadeOut/fadeIn?

Bonus question: What are some ways to test how much processing power your script/function is using up?

• kht: jQuery 1.7 better handles animations with increased performance. You could try updating jQuery if it helps. blog.jquery.com/2011/11/03/jquery-1-7-released

Answer 1

for optimizing this function - will be better if you'll give an example of working code. Just upload some sample to http://jsfiddle.net/.

Anyway, to reduce the load on any animations, use default CSS transitions.

-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;

And then change the opacity from 1 to 0 or change class. Here is an working example http://jsfiddle.net/x6fxx/ , works much faster then jquery's script, this one is css based solution which is using hardware acceleration ( modern browsers ).