jquery - 如何在 jQuery 中设置背景颜色动画？

Question

我做错了什么，以下内容没有为背景颜色设置动画？

<div style="height:100px;width:100px;background:red">animate this</div><br>
<input type="button" id="mybutton" value="start"/><br>


$("#mybutton").click(function(){
   $("div").animate({backgroundColor: 'blue'});
});

http://jsfiddle.net/bjf2L0ha/

Answer 1

您需要导入额外的插件，例如 jQuery UI为了支持 animate() 函数中的颜色，而 jQuery 本身并不支持颜色。

$("#colorBtn").click(function() {
  $('#demodiv').animate({backgroundColor: 'blue'})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type="button" id="colorBtn" value="Change Color"/><br>

<div id="demodiv" style="height:100px;width:100px;background:red"></div>