Animate не работает, как ожидалось

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>