Div background color animation not working

Question

I am appending content into a Div.

Now i want to change its background color when the div appends.

If the div is green by default, so when it appends, it should change the color to blue slowly and than again change back to its default color green.

Here is my Fiddle:

http://jsfiddle.net/MbSH7/15/

Here is what I have tried so far.Providing Code here:

Jquery:

$('#add').click(function (){        
   $('.main_container').append('<div  class="container"> this is a Test</div>').animate({ "background-color": "blue" }, 900, "linear").delay().fadeIn(500).animate({ "background-color": "green" }, 900, "linear").delay().fadeIn(500);       

});

HTML:

<div class="main_container" >        
    <div class="container"> this is a Test</div>        
</div>    
<a href="javascript:void(0);" id="add">Add</a>

CSS:

.container 
{ 
  width:400px; 
  background-color:green; 
  color:white;  
  margin:2px;
}
.main_container 
{ 
  width:400px;
}

Answer 1

jQuery does not animate color. You need to either include jQuery UI, which has extended jQuery to include color animation, or use a jQuery color plugin like this one : https://github.com/jquery/jquery-color/

DEMO

Also, append is returning the wrapper, not the content so :

   $container = $('<div  class="container"> this is a Test</div>');
   $('.main_container').append($container);
   $container.doStuff

not

   $('.main_container')
   .append('<div  class="container"> this is a Test</div>').doStuff

---

You did not include the plugin in your fiddle, here is why my demo works: