Trying to change div background colors in a specified sequence

Using JQuery's jquery.animate-colors-min.js plugin I am trying to change the background color of some div boxes in a sequence.

$('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow')

Above is what i used to animate the first box which works fine but i dont know how I would go about initiating a callback (if possible) to animate the background-color of the next specified box.

This below is just an example of something that woulda been great although as expe开发者_Python百科cted it does not work

    $('#firstbox').click(function(){

    $('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow'), function(){
                 $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
        })

Any suggestions would be welcome.

Thanks

Try this

$('#firstbox').click(function(){

    $(this).animate({ backgroundColor: "#f6f6f6" }, 'slow', function(){
                 $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
        });
});

You have a syntax error:

 $('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow'), function(){
     $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
 })

should be:

 $('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow', function(){
     $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
 })

animate() has three arguments

$('#firstbox').click(function(){
    $('#firstbox').animate({ backgroundColor: "#f6f6f6" }, 'slow', function(){
                 $('#secondbox').animate({ backgroundColor: "#f6f6f6" }, 'slow');
    });
});