I'm trying to animate the background color of a div onclick but it's simply not changing it:

HTML

<div id="list2" onclick="changeCol();">
    color
</div>

CSS

#list2{ width:200px; height:100px; border:1px solid #ccc; background-color:#ccc}

JQuery/JS

function changeCol(){
    alert('foo'); // testing function called
    $("#list2").animate({
      backgroundColor: "#8bed7e"
    }, 500).animate({
      backgroundColor: "#ccc"
    }, 500);
}

Any ideas why? Here's a fiddle

I'm trying to animate the background color of a div onclick but it's simply not changing it:

HTML

<div id="list2" onclick="changeCol();">
    color
</div>

CSS

#list2{ width:200px; height:100px; border:1px solid #ccc; background-color:#ccc}

JQuery/JS

function changeCol(){
    alert('foo'); // testing function called
    $("#list2").animate({
      backgroundColor: "#8bed7e"
    }, 500).animate({
      backgroundColor: "#ccc"
    }, 500);
}

Any ideas why? Here's a fiddle

• javascript
• jquery

Share Improve this question Follow edited Feb 10, 2017 at 14:19 Turnip 36.7k1515 gold badges9191 silver badges117117 bronze badges asked Dec 4, 2014 at 11:09 StudioTimeStudioTime 24.1k4040 gold badges128128 silver badges215215 bronze badges 2

• jquery animations only work on numeric values, you cannot use it for background color – Kinnza Commented Dec 4, 2014 at 11:12
• 4 Possible duplicate of jQuery animate backgroundColor – Abhinav S Commented Feb 10, 2017 at 10:56

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5

use CSS3 (will work for CSS3 supporting browsers only, unsupported browsers WILL change the color but without animation):

html:

<div id="list2">color</div>

css:

#list2{background:red;transition:0.5s ease;-moz-transition:0.5s ease;-webkit-transition:0.5s ease;}
#list2.clicked{background:blue;}

js:

$(function(){ 
    $('#list2').click(function(){ 
        $(this).toggleClass('clicked') 
    }) 
});

working example here: http://jsfiddle/18v8ofwn/1/

note that instead of CSS3 you can use the jQuery UI library (see mour answer), without a single change for your code (cross-browser solution).

hope that helps.

check

http://jsfiddle/qggyec4t/16/

$(document).ready(function () {

    $("#list2").click(function () {
        alert('hii');
        $("#list2").animate({
            backgroundColor: 'red',
        });
    });
});

You have to use jquery-ui.js and jquery-ui.css with your code. It will work perfectly fine.

Updated JSFiddle

function changeCol(){
    $("#list2").animate({
       backgroundColor: "#8bed7e"
    }, 500).animate({
        backgroundColor: "#ccc"
    }, 500);
}

Here's a working code for what you're trying to do using jquery-color-plugin as it says in the Official jQuery documentation

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

function changeCol() {
  $("#list2").animate({
    backgroundColor: "red"
  }, 500).animate({
    backgroundColor: "green"
  }, 500);
}

#list2 {
  width: 200px;
  height: 50px;
  border: 1px solid #ccc;
  background-color: #ccc;
  text-align: center;
  vertical-align: center;
  cursor: pointer;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://code.jquery./color/jquery.color.plus-names-2.1.2.js"></script>
<div id="list2" onclick="changeCol()">
  color
</div>

JS Fiddle Code Snippet Link

I had this issue before. JQuery cannot animate background color, you need a plugin to do that.

Here's one that does it:

http://www.bitstorm/jquery/color-animation/

https://github./jquery/jquery-color/ is another

jQuery, by default, can't animate colors. I'm using the following plugin when I have to do such things:

https://github./jquery/jquery-color/

You can also animate the background using CSS3 which performs really well (see: Transition of background-color)

DO you have a color plugin? You can't animate background color without it. You can find one here: https://github./jquery/jquery-color