javascript - div背景颜色动画不起作用

Question

我将内容附加到一个 Div 中。

现在我想在追加 div 时更改其背景颜色。

如果 div 默认是绿色的，那么当它追加时，它应该慢慢地把颜色变成蓝色，然后再变回它的默认颜色绿色。

这是我的小提琴：

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

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

查询：

$('#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/

演示

此外， 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

---

您没有在小提琴中包含插件，这就是我的演示有效的原因：