Animate element background color onclick

Question

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

jquery animations only work on numeric values, you cannot use it for background color — Kinnza, Dec 04 '14 at 11:12
Possible duplicate of [jQuery animate backgroundColor](http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — Abhinav S, Feb 10 '17 at 10:56

geevee · Accepted Answer · 2014-12-04T11:29:57.530

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.net/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.

edited Dec 04 '14 at 11:29

answered Dec 04 '14 at 11:11

geevee

5,411
5
30
48

1

`:hover` isn't onclick behaviour – A. Wolff Dec 04 '14 at 11:13
1

Ya, toggling class is the best way imho, keeping design logic in CSS. As a side note, this could be only CSS solution, but this shouldn't be used in this case of a DIV: http://jsfiddle.net/18v8ofwn/2/ – A. Wolff Dec 04 '14 at 11:31
nice, js-free solution, checkbox is a nice idea. +1 – geevee Dec 04 '14 at 11:32

score 0 · Answer 2 · answered Dec 04 '14 at 11:18

0

check

http://jsfiddle.net/qggyec4t/16/

$(document).ready(function () {

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

answered Dec 04 '14 at 11:18

mydeve

553
1
14
39

score 0 · Answer 3 · answered Dec 04 '14 at 11:20

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);
}

score 0 · Answer 4 · edited Mar 25 '17 at 13:00

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

JS Fiddle Code Snippet Link

score -1 · Answer 5 · answered Dec 04 '14 at 11:11

-1

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.org/jquery/color-animation/

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

answered Dec 04 '14 at 11:11

roryok

9,325
17
71
138

score -1 · Answer 6 · edited May 23 '17 at 12:10

-1

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

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

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

edited May 23 '17 at 12:10

Community

1
1

answered Dec 04 '14 at 11:12

posixpascal

3,031
3
25
44

score -1 · Answer 7 · answered Dec 04 '14 at 11:12

-1

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

answered Dec 04 '14 at 11:12

Sheremet

32
3

Animate element background color onclick

7 Answers7