javascript - 改变渐变背景颜色，慢动画

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>

这是它目前的样子：

想法是当我按下箭头时，背景会变成另一种渐变色。我已经设置了这个类。所以它应该慢慢淡入“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 */
}  

我已经在 J​​query 中尝试过这个以及更多，但它总是会立即改变。我希望任何人都可以帮助我。

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

Answer 1

见演示。

<div>您可以通过使用绝对位于目标元素下方的渐变创建两个单独的 s，将背景与元素分离。然后，您可以使用不透明度制作动画以在这两种渐变之间切换。

<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

您可能想看一下转换属性。都是 CSS3，不需要 jquery ！

编辑：我的错，正如安东尼所说，您不能将过渡应用于背景渐变。