動畫工作不正常

Question

這是我的jQuery函數：

var flashField = function ($field) { 
    var colour = $field.css('background-color'); // gets colour ok 
    $field.css('backgroundColor', '#FF0000'); // sets background ok 
    $field.animate({ 'backgroundColor': colour }, 1500); // nada 
} 

我想要抓住元素的當前背景，其切換爲紅色，然後褪色回原來的顏色。

但是animate函數不會執行任何操作，控制檯中也不會顯示任何錯誤。

我做錯了什麼？已嘗試搜索，但無法找到任何顯示不好的語法或任何內容。

（在Chrome 45.0.2454.93米測試）

Answer 1

您需要使用jquery-ui.js動畫色彩。來自documentation：

jQuery UI捆綁了提供顏色動畫的jQuery顏色插件以及許多用於處理顏色的實用函數。

$(function() { 
 
    var state = true; 
 
    $("#button").click(function() { 
 
     if (state) { 
 
     $("#effect").animate({ 
 
      backgroundColor: "#aa0000", 
 
      color: "#fff", 
 
      width: 500 
 
     }, 1000); 
 
     } else { 
 
     $("#effect").animate({ 
 
      backgroundColor: "#fff", 
 
      color: "#000", 
 
      width: 240 
 
     }, 1000); 
 
     } 
 
     state = !state; 
 
    }); 
 
    });

.toggler { 
 
    width: 500px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 
#button { 
 
    padding: .5em 1em; 
 
    text-decoration: none; 
 
} 
 
#effect { 
 
    width: 240px; 
 
    height: 135px; 
 
    padding: 0.4em; 
 
    position: relative; 
 
    background: #fff; 
 
} 
 
#effect h3 { 
 
    margin: 0; 
 
    padding: 0.4em; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<div class="toggler"> 
 
    <div id="effect" class="ui-widget-content ui-corner-all"> 
 
    <h3 class="ui-widget-header ui-corner-all">Animate</h3> 
 
    <p> 
 
     Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>