цвет фона не работает в JQuery

Question

JQuery

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("h2").animate({backgroundColor: '#00f', width: '50%', marginLeft: '50px'}); 
    }); 
}); 
</script> 

HTML

<h2>This is a heading</h2> 
<p style="background: #ff0">This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<button>Click me</button> 

Я учусь JQuery и найти с помощью CSS как margin-left к marginLeft, как это в моем тесте marginLeft работал, но backgroundColor не может работать , Я здесь, или я ошибаюсь?

Answer 1

Для анимации цвета фона вам необходимо включить плагин, который поддерживает его как jquery UI или jquery color.

http://jsfiddle.net/GW5hB/

Answer 2

Казалось нам, Вы не включая jqueryUi.js

вам это нужно, чтобы быть включены (после включения jquery.js)

<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script> 

• http://jqueryui.com/animate/

jQuery UI связывает плагины jQuery Color, которые обеспечивают цветные анимации , а также множество функций утилиты для работы с цветами.

Answer 3

Вам понадобится плагин, который позволяет анимировать цвета фона

из documentation:

(например, ширина, высота, или влево может быть анимированным, но цвет фона не может быть , если не используется плагин jQuery.Color()).

Answer 4

Возможный обходной путь для анимации цвета без jQueryUI, основанный на this answer:

function toRGB(hexStr) { 
    var s = hexStr.substring(1); 
    if (s.length==3) { 
     s = s.charAt(0) + s.charAt(0) + s.charAt(1) + s.charAt(1) + s.charAt(2) + s.charAt(2); 
    } 
    var i = parseInt(s, 16); 
    var rcolor = (i & 0xff0000) >> 16; 
    var gcolor = (i & 0x00ff00) >> 8; 
    var bcolor = i & 0x0000ff; 
    return { r:rcolor, g:gcolor, b:bcolor }; 
} 

$('button').click(function(){ 
    var elem = $('div'); 
    var c1 = toRGB('#ffffff'), c2 = toRGB('#0000ff'); 
    $(c1).animate(c2, { 
     duration:2000, 
     step: function(){ 
      elem.css('backgroundColor', 'rgb('+parseInt(this.r)+','+parseInt(this.g)+','+parseInt(this.b)+')'); 
     } 
    }); 

}); 

jsfiddle