Animating background colour from solid to transparent isn't working

Question

Why can't I animate a background colour to transparent? Here is my code:

$('#cs4').animate({'backgroundColor':'#ff6600'}, 2000);    

setTimeout(function() {    
    $('#cs4').animate({'backgroundColor':'transparent'}, 2000);
}, 2000);

Guys, i have already the plugin. its not the question. my question is how to render the bg transparent. with normal colors it works fine.

thanks in advance

See jQuery animate to transparent [http://stackoverflow.com/questions/3679864/jquery-animate-to-transparent][1] [1]: http://stackoverflow.com/questions/3679864/jquery-animate-to-transparent — kidcapital, Dec 14 '11 at 18:50
Don't you want to change the opacity... not the background color? — scottheckel, Dec 14 '11 at 18:50
hexxagonal, if i change opacity it hides also the text. not a big deal ;) — Mike, Dec 14 '11 at 19:06

score 3 · Accepted Answer · answered Dec 14 '11 at 18:49

3

You cannot animate background colors (or any color change for that matter) without a plugin. jQuery UI does this: http://jqueryui.com/

Here is a demo for animating color change: http://jqueryui.com/demos/animate/

You can build a small version of the library with their download tool that only has this functionality.

answered Dec 14 '11 at 18:49

Jasper

75,717
14
151
146

The [`jQuery.color`](https://github.com/jquery/jquery-color) plugin can do it, too. Just in case you don't want the added bulk of UI. – Andy E Dec 14 '11 at 18:51
That's a good call. A small version of jQuery UI is still like 50KB or something. Although you don't need the CSS for this functionality. – Jasper Dec 14 '11 at 19:01
I agree, the CSS implementation is generally very nice, however if you need to support older browsers (which still make up a disgusting portion of browser usage) then CSS won't do. – Jasper Dec 14 '11 at 19:24

score 3 · Answer 2 · answered Dec 14 '11 at 18:56

3

If you don't want to use an extra jQuery plugin, consider using CSS3 animations.

You will lose some support in old browsers, but animation is no necessary functionality.

Example syntax (with only -webkit vendor prefix for simplicity):

#cs4 { -webkit-animation: fadeOut 2s ease-in; }

@-webkit-keyframes fadeOut {
    from {background:#ff6600;}
    to {background:transparent;}
}

Demo

More information

answered Dec 14 '11 at 18:56

bookcasey

39,223
13
77
94

1

You can also use `-webkit-transition`, are you award if `keyframes` perform faster than `transition`s? – Jasper Dec 14 '11 at 19:00
1

Transitions are a better way to do it though – ShrekOverflow Dec 14 '11 at 19:18
Yeah, you'd generally want to go with `-transition` for a simple animation like this. – Andy E Dec 15 '11 at 10:10

score 2 · Answer 3 · answered Dec 14 '11 at 18:50

2

Use this jQuery plugin

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

answered Dec 14 '11 at 18:50

ShankarSangoli

69,612
13
93
124

score 0 · Answer 4 · edited Nov 08 '12 at 17:48

0

Try this:

$('#cs4').animate({'backgroundColor':'#ff6600'}, 2000);    

setTimeout(function() {    
    $('#cs4').animate({'backgroundColor':'rgba(255, 255, 255, 0)'}, 2000);
}, 2000);

edited Nov 08 '12 at 17:48

cspolton

4,495
4
26
34

answered Nov 08 '12 at 17:26

alaki

7
1
2

Welcome to Stack Overflow and thanks for your answer. It would be nice if you could also add an explanation of what the problem was and why this helps... – Day Nov 08 '12 at 17:50

Animating background colour from solid to transparent isn't working

4 Answers4