javascript - Change gradient background-color, slow animation -

i'm trying change background color on section.

<section id="welcome" class="gradientblue">     <div class="maintitle">         <h1>sdesigns</h1>         <h2>taking web design next level</h2>         <div class="centerarrow">             <i id="0" class="icon-caret-down arrow arrowdown"></i>         </div>     </div> </section> 

the how looks:

the idea when press arrow background changes gradient color. set class up. should fade-in class "gradientgreen".

.gradientgreen{     background-color:#39b54a;     background: -webkit-gradient(radial, center center, 0, center center, 460, from(#8dc63f), to(#205075));/* safari 4-5, chrome 1-9 */      background: -webkit-radial-gradient(circle, #8dc63f, #39b54a);/* safari 5.1+, chrome 10+ */     background: -moz-radial-gradient(circle, #8dc63f, #39b54a);/* firefox 3.6+ */     background: -ms-radial-gradient(circle, #8dc63f, #39b54a);/* ie 10 */ }   

i tried , many more in jquery changes instant. hope can me.

$('.arrowdown').click(function(e) {     $("#welcome").addclass("gradientgreen"); } 

see demo.

you can detach background element creating 2 separate <div>s gradients absolutely positioned beneath target element. can animate opacity switch between these 2 gradients.

<section id="welcome">     <div class="maintitle"><!-- text --></div>     <div id="back1" class="gradientblue"></div>     <div id="back2" class="gradientgreen"></div> </section> 

#welcome {     position: relative; } #back1 {     position: absolute;     width: 100%;     height: 100%;     z-index: -1;     top: 0;     left: 0; } #back2 {     position: absolute;     width: 100%;     height: 100%;     z-index: -2;     top: 0;     left: 0; } 

then change opacity of initial background.

$('.arrowdown').click(function (e) {     $("#back1").animate({opacity: 0}, 1000); });