jQuery Animate() and BackgroundColor

Question

I'm trying to create a simple pulse effect by changing the background color using JQuery. However, I can't get the backgroundColor to animate.

function show_user(dnid) {
    /* dnid is HTML ID of a div. */
    if (! $(dnid).is(':visible')) {
        $(dnid).show()
    }
    $('html, body').animate({scrollTop: $(dnid).offset().top});
    $(dnid).animate({backgroundColor: "#db1a35"}, 1200);
}

What's strange is that this alternate animation works:

$(dnid).animate({opacity: "toggle"}, 1200);

But it's not what I want at all.

Additionally the show() and scroll functionality in the function work fine. It's just the background color animation that doesn't.

The function above is called by this link <a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>

Could someone help me animate the background color?

=========

Thanks everyone for the help. Lots of similar answers. Here's what I ended up with

In my header

<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

Then in my show_user function right after the scroll animation.

var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);

That gives a relatively quick red "pulse" that will draw the user's eyes.

Again, thanks for the help.

You'll need to use either jQuery UI, or a color plugin to animate colours. — David Thomas, May 31 '13 at 18:34
Not sure if this is still the case, but Jon Resig himself made a background plugin for solely animating background colors, it's not something built into jQuery. — Sethen, May 31 '13 at 18:34
May be this should help http://stackoverflow.com/a/14362680/297641 — Selvakumar Arumugam, May 31 '13 at 18:36
@DavidThomas I think jQuery has included color animation sometime back.. http://stackoverflow.com/a/14362680/297641 — Selvakumar Arumugam, May 31 '13 at 18:37
@Vega: I stand corrected! In which version of jQuery did that change occur? (I ask, though I'll go look at the API in a moment anyway...). No, wait: the API still states: "width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used." — David Thomas, May 31 '13 at 18:39
@DavidThomas Looks like it was added in jQuery 1.9 release http://jqueryui.com/changelog/1.9.0/ under Effects. — Selvakumar Arumugam, May 31 '13 at 18:41
@Vega, despite the API (or my misunderstanding of it), your demo definitely proves it to work. Weird. Perhaps now is the time for espresso... — David Thomas, May 31 '13 at 18:43
open your console and type `$('#footer').animate({'background-color':'#000000'}, 1200)` and watch the footer go black on this page. — Milo LaMar, May 31 '13 at 18:44
Possible duplicate of [jQuery animate backgroundColor](http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — Cthulhu, Mar 31 '16 at 08:27

score 16 · Accepted Answer · answered May 31 '13 at 18:33

16

jQuery cannot animate colours by default. In order to animate colours, use the official jQuery.Color plugin.

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).

Source

answered May 31 '13 at 18:33

Nate Higgins

2,104
16
21

Wonderful! Thanks for the explanation why backgroundColor is excluded from the standard library. I've created a solution based on your recommendation. – fandingo May 31 '13 at 18:54
why not just animate the css property: `$(dnid).animate({'background-color': "#db1a35"}, 1200);` see my answer below – Milo LaMar May 31 '13 at 20:46

score 4 · Answer 2 · answered May 31 '13 at 18:39

4

jQuery supports animation between any numeric CSS properties, which does not include colors. However, there are other libraries that make animating colors possible. One such library is the aptly-named jQuery Color. Its readme page shows several examples of how to use it to animate between colors using the jQuery .animate() function

answered May 31 '13 at 18:39

grandivory

629
3
6

Awesome. I didn't realize that jQuery limited animations to numeric properties. Thanks for the thorough explanation. – fandingo May 31 '13 at 18:58

score 2 · Answer 3 · answered May 31 '13 at 18:54

Use the CSS animation property and keyframes

See it in action

HTML

<div></div>

CSS

div {
    background-color: red;
    height: 200px; width: 200px;
    -webkit-animation: pulse 1s ease-in 0 infinite normal both;
    -moz-animation: pulse 1s ease-in 0 infinite normal both;
    -o-animation: pulse 1s ease-in 0 infinite normal both;
    animation: pulse 1s ease-in 0 infinite normal both;
}

@-webkit-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-moz-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-ms-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@-o-keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}
@keyframes pulse {
    0% { background-color: red; }
    65% { background-color: #7F0093; }
    100% { background-color: blue; }
}

You're welcome `:)` Don't forget to check cross browser compatibility if you're planning to use it in production — Sourabh, Dec 13 '13 at 08:00

score 0 · Answer 4 · answered May 31 '13 at 18:41

0

you must first set the background to the from color or it wont do anything 2nd time around. You also typoed the css property 'background-color' and put it in quotes like i didn't :)

$(dnid).css({'background-color': "#ffffff"});

$(dnid).animate({'background-color': "#db1a35"}, 1200);

answered May 31 '13 at 18:41

Milo LaMar

2,146
2
14
25

If there are other style properties on the thing you don't want to reset, you can just do `$(dnid).css('background-color', '#ffffff');` – Milo LaMar May 31 '13 at 18:48
Does this work? Can you jsFiddle this? I couldn't get this to work for me. – Chud37 Oct 20 '14 at 12:43
Sorry @Chud37 it turns out I was making use of the jQueryUI library for the color animation. http://jsfiddle.net/aw42aj2L/ – Milo LaMar Oct 22 '14 at 21:35

score 0 · Answer 5 · answered Jun 16 '17 at 09:02

0

Just add this below your jQuery script and you are done:

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>

answered Jun 16 '17 at 09:02

Darush

11,403
9
62
60

jQuery Animate() and BackgroundColor

5 Answers5

Linked

Related