Как оживить цвет фона в 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>

Answer 2

Попробуйте установить rgb значения cssbackground-color свойство в step опции .animate()

var props = { 
 
    from: 255, 
 
    to: 0 
 
    }, 
 
    div = $("div"), 
 
    button = $("#mybutton"); 
 

 
button.click(function() { 
 

 
    $(props).finish().animate({ 
 
    // toggle between "blue" , "red" 
 
    from: props.from === 255 ? 0 : 255, 
 
    to: props.to === 0 ? 255 : 0 
 
    }, { 
 
    easing: "linear", 
 
    duration: 3000, 
 
    step: function() { 
 
     div.css("backgroundColor" 
 
        , "rgb(" 
 
        + Math.round(this.from) 
 
        + ", 0, " 
 
        + Math.round(this.to) + ")"); 
 
    } 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="display:block;height:100px;width:100px;background-color:red">animate this</div> 
 
<br> 
 
<input type="button" id="mybutton" value="start" /> 
 
<br>