更改渐变背景色，慢动画

Question

我正在尝试更改某个部分的背景颜色。

<section id="welcome" class="gradientBlue">
    <div class="mainTitle">
        <h1>Sdesigns</h1>
        <h2>Taking web design to the next level</h2>
        <div class="centerArrow">
            <i id="0" class="icon-caret-down arrow arrowDown"></i>
        </div>
    </div>
</section>

目前看来是这样的：

当我按箭头时，背景变为另一种渐变颜色。我已经开始上课了。所以它应该慢慢淡入“gradGreen”类。

.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 */
}  

我已经在Jquery中尝试了这个以及更多但是它总是在瞬间改变。我希望有人能帮助我。

$('.arrowDown').click(function(e) {
    $("#welcome").addClass("gradientGreen");
}

Answer 1

请参阅DEMO。

您可以通过创建两个单独的<div>来分离背景，这些渐变位于目标元素下方。然后，您可以使用不透明度设置动画以在这两个渐变之间切换。

<section id="welcome">
    <div class="mainTitle"><!-- your 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;
}

然后更改初始背景的不透明度。

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

Answer 2

您可能需要查看the transition property。这都是CSS3，不需要jquery！

编辑：我的不好，因为Antony说你无法将过渡应用于背景渐变。