Question

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 expected it does not work

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

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

Any suggestions would be welcome.

Thanks

Answer 1

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');
 })