Div背景颜色动画不起作用

Question

我将内容附加到Div。

现在我想在div附加时改变它的背景颜色。

如果div默认为绿色，那么当它附加时，它应该慢慢地将颜色更改为蓝色，然后再次更改回其默认颜色绿色。

这是我的小提琴：

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

这是我到目前为止所尝试的内容。在此处提供代码：

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没有动画颜色。你需要包含jQuery UI，它扩展了jQuery以包含颜色动画，或者使用像这样的jQuery颜色插件：https://github.com/jquery/jquery-color/

DEMO

另外，append返回包装器，而不是内容：

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

不

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

---

你没有在你的小提琴中包含插件，这就是为什么我的演示工作原理：