jQuery animate to transparent - easier solution?

Question

I want to animate background from coloured to transparent. I have code like this:

$(\'.selector\')
.animate({
        \'background-color\' : \'transparent\'
}, 2         


        

Answer 1

css

.animated {-webkit-transition:background 0.4s ease;-moz-transition:background 0.5s ease;-ms-background 0.5s ease;background 0.5s ease;}
.selector {background:red}
.transparent_background {background: transparent};

html

<div class="selector animated"></diV>

js

$(".selector").addClass("transparent_background");

http://jsfiddle.net/UEyc6/

Answer 2

Let CSS do the animation, and fallback to javascript when it's not supported with (for example) Modernizr: http://modernizr.com/

if (Modernizr.csstransitions) {
    // Animate background color
    $('.element').addClass('animate-background-color');
} else {
    // use javascript animation.
}

And Your css:

.element {
    -webkit-transition: background-color .5s ease-out 0.1s;
    -moz-transition: background-color 5s ease-out 0.1s;
    transition: background-color .5s ease-out 0.1s;
    background-color: rgba(121,123,123,1);
}

.element.animate-background-color {
    background-color: rgba(121,123,123,0);
}

Fiddle for the css animation: http://jsfiddle.net/c5PHf/