jquery highlight fading - timeout problem

Question

I have two sets of boxex on a page. 10 boxes belonging to class 'boxOne' and another 10 belonging to class 'boxTwo'
There is a button. On click of button I am using jquery effect to highlight and then fade the background color of all the element belonging to class 'Boxone' and 'Boxtwo'.

Below is the code.

var colorOfBox1 = "'" + $(.boxOne).css('backgroundColor') + "'";  
$(.boxOne).animate(
    { 'backgroundColor': "#FF9900" }, 
    { 'queue': false, 'duration': 1000 });

setTimeout( function(){  
        $(.boxOne).animate(
          { 'backgroundColor': colorOfBox1}, 
        {'queue': false, 'duration': 2000} 
      );
}, 2000);

var colorOfBox2 = "'" + $(".boxTwo).css("backgroundColor") + "'";  
$('.boxTwo').animate({ 'backgroundColor': "#FF9900" }, {'queue': false, 'duration': 1000});  
  setTimeout(
    function(){
        $('.boxTwo).animate(  
            { 'backgroundColor': colorOfBox2 }, 
                {'queue': false, 'duration': 2000} 
          );
}, 2000);

All the boxes are highlighted with the specified color on click of the button.. Now the problem is that sometimes few out of these boxes don't fade out. Their background remains highlighted. This happens sometimes with no consistency. I want a consistent behavior.

I see that the setTimeOut() function is not applied uniformly to all the elements belonging to that class... It is apllied only to few elments..
What fault am i making ?

Answer 1

Now i am using this plugin and it just works fine.

http://jquery.offput.ca/highlightFade/old.php

Answer 2

Perhaps check the syntax of the Javascript code first. Inconsistent syntax causes inconsistent results on different browsers.

Answer 3

You seem to be missing a few quote marks around .boxOne and .boxTwo in some places. Not sure if that was a formatting error or intentional. Could be causeing issues with some browsers.