jQuery + RGBA color animations

Question

Does anyone know if jQuery can handle an animation like:

rgba(0,0,0,0.2) → rgba(0,255,0,0.4)

I know there is a plugin to handle color animations, but this might be too modern?

Useful answers over at this question marked duplicate: http://stackoverflow.com/questions/4194745/changing-rgba-alpha-transparency-with-jquery — jedierikb, Aug 13 '12 at 19:16

Selvakumar Arumugam · Answer 1 · 2013-01-18T21:22:08.523

26

Using CSS3 animation (no javascript)

You can also achieve the same effect using CSS3 animation. See below,

Step 1: Create a keyframe for your animation

@keyframes color_up {
    from {
        background-color: rgba(0,0,0,0.2);
    }
    to {
        background-color: rgba(0,255,0,0.4);
    }
}

Step 2: Use the animation rules.

  animation-name: color_up;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;

DEMO: http://jsfiddle.net/2Dbrj/3/

Using jQuery

jQuery now supports color animation with RGBA support as well. This actually animates from one color to other.

$(selector).animate({
  backgroundColor: 'rgba(0,255,0,0.4)'
});

DEMO: http://jsfiddle.net/2Dbrj/2/

edited Jan 18 '13 at 21:22

answered Jan 16 '13 at 16:07

Selvakumar Arumugam

79,297
15
120
134

@DjangoReinhardt Updated answer with CSS3 – Selvakumar Arumugam Jan 18 '13 at 21:22
1

The CSS3 JSFiddle doesn't seem to want to work in Chrome. Thanks, though! – Chuck Le Butt Jan 19 '13 at 03:45
1

@Monk You need to add -webkit- for keyframes see http://jsfiddle.net/rparree/2QsL6/1/ – raphaëλ Jul 26 '14 at 06:56
Better solution!! – Myo Win Apr 28 '18 at 05:46

score 8 · Accepted Answer · edited May 31 '13 at 18:49

8

Uh, nevermind. Found an amazing modification to the jquery color plugin.

http://pioupioum.fr/sandbox/jquery-color/

edited May 31 '13 at 18:49

Selvakumar Arumugam

79,297
15
120
134

answered Jul 13 '10 at 23:39

Matrym

16,643
33
95
140

1

Um, just to add another random coolness tidbit for those interested. RGBA cross browser via php image generation: http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/ – Matrym Jul 13 '10 at 23:49
1

Unfortunately this modded version doesn't seem to support modern browsers :( – Chuck Le Butt Jan 16 '13 at 14:55

score 2 · Answer 3 · edited Jan 15 '14 at 19:36

2

use jquery UI for handle that, $(object).animate({color : 'rgba(0,0,0,.2)'},500)

edited Jan 15 '14 at 19:36

koopajah

23,792
9
78
104

answered Jan 15 '14 at 19:17

ilovebali

513
2
7
20

jQuery + RGBA color animations

3 Answers3

Using CSS3 animation (no javascript)

Using jQuery

Linked

Related