jQuery animation/blinking code? I have one container div which contains some children div members. From time to time, I need to run a custom blinking effects on some of the child div members. The effect steps are as follows:


Change font color to Yellow 
Pause for 0.5 secs
Change background color to yellow and text color to black
Pause for 0.25 secs
Change font color to Yellow &amp; background to black
Pause for 0.25 secs
Change background color to yellow and text color to black
Pause for 0.5 secs
Repeat step 1 to 8 


Below is the JavaScript code that I came up using jQuery to achieve the above effect. The code is working perfectly fine, but somehow I feel that this is not an elegant solution and there may be possible issue with how I pass $elements var from one function to another.

Is there anything wrong with this approach?  How can this code be improved?

function startAnimation($container) {
    var $elements = $container.find(".animation");
    if ($elements.length) {           
        $elements.switchClass("mc-ylw-blk", "mc-blk-ylw", 0).show(0).delay(500).promise().done(function () {
            $elements.switchClass("mc-blk-ylw", "mc-ylw-blk", 0).delay(250).promise().done(function () {
                $elements.switchClass("mc-ylw-blk", "mc-blk-ylw", 0).delay(250).promise().done(function () {
                    $elements.switchClass("mc-blk-ylw", "mc-ylw-blk", 0).delay(500).promise().done(function () {                                                       
                            startAnimation($container);   //Repeat                   
                    });                 
                });
            });
        });
    }

}
you can chain the delay and switchClass to $elements and take the $("#container").find(".animation"); outside the function like this       

function startAnimation($elements) {
$elements.switchClass("mc-ylw-blk", "mc-blk-ylw", 0)
      .delay(500).switchClass("mc-blk-ylw", "mc-ylw-blk", 0)
      .delay(250).switchClass("mc-ylw-blk", "mc-blk-ylw", 0)
      .delay(250).switchClass("mc-blk-ylw", "mc-ylw-blk", 0)
      .delay(500).promise().done(function () { 
          startAnimation($elements);
      });
}
var $elements=$("#container").find(".animation");
if ($elements.length) {
    startAnimation($elements);
}       


http://jsfiddle.net/Y95rU/1/