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

Question

我正在将内容附加到 Div。

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

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

这是我的 fiddle :

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

---

你没有在你的 fiddle 中包含插件，这就是我的演示有效的原因: