jQuery动画div背景色渐变？

Question

我正在尝试使用jQuery构建一个背景动画，可以从一个渐变颜色切换到另一个。我知道你可以使用.animate()函数来改变实心背景颜色，但是对于渐变颜色也可以这样做吗？

以下是一些旧的Digg风格评论中的很好的例子。我想做类似的动画，从绿色到黄色的渐变。

- Jake

---

请参考以下两个与JQuery背景动画相关的链接：**Jquery background animate** 和 **JQuery background color animate not working**。 - Siva Charan

Answer 1

使用jQuery给背景添加动画效果是完全可行的，可以在这个CodePen上看到示例(非本人创建，但非常流畅): http://codepen.io/quasimondo/pen/lDdrF

CodePen的示例使用了一些巧妙的位移和其他技巧来确定颜色，但他只是定义了一个函数（updateGradient）来修改背景的CSS，然后将其包装在setInterval中。

从updateGradient中得到的最大收获如下:

 $('#gradient').css({
     background: "-webkit-gradient(linear, left top, right top, from("+color1+"),
   to("+color2+"))"}).css({
     background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

然后只需动态设置颜色变量，就可以轻松搞定。

- lyyons

---

我可以在from()和to()属性中使用多个颜色来处理更复杂的渐变（例如径向渐变）吗？ - Jonathan

Answer 2

试试这个，效果非常好 -

div{
     display:block; 
     width:500px; 
     height:250px;
     background: linear-gradient(270deg, #509591, #7bc446, #c0de9e, #b9dca4);
     background-size: 800% 800%;

     -webkit-animation: AnimationName 30s ease infinite;
     -moz-animation: AnimationName 30s ease infinite;
     animation: AnimationName 30s ease infinite;
}


@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

<div></div>

source - https://www.gradient-animator.com/

- Rohit Suthar

Answer 3

更新：现在，所有主流浏览器都支持CSS动画，比jQuery更可靠。有关参考，请参见Rohit's answer。

旧答案：

使用jQuery直接对背景进行动画处理几乎是不可能的，至少我无法想到方法。但是，有一种方法可以实现：

-webkit-transition: background 5s ;
-moz-transition: background 5s ;
-ms-transition: background 5s ;
-o-transition: background 5s ;
transition: background 5s ;

这可以确保有一种过渡效果。例如，您可以在 CSS 中执行此操作：

.background_animation_element{

    -webkit-transition: background 5s ;
    -moz-transition: background 5s ;
    -ms-transition: background 5s ;
    -o-transition: background 5s ;
    transition: background 5s ;

    background: rgb(71,234,46);
    background: -moz-linear-gradient(top,  rgba(71,234,46,1) 0%, rgba(63,63,63,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(71,234,46,1)), color-stop(100%,rgba(63,63,63,1)));
    background: -webkit-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -o-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: -ms-linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    background: linear-gradient(top,  rgba(71,234,46,1) 0%,rgba(63,63,63,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#47ea2e', endColorstr='#3f3f3f',GradientType=0 );

}

.background_animation_element.yellow{

    background: rgb(247,247,49);
    background: -moz-linear-gradient(top,  rgba(247,247,49,1) 0%, rgba(63,63,63,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,49,1)), color-stop(100%,rgba(63,63,63,1)));
    background: -webkit-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: -o-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: -ms-linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    background: linear-gradient(top,  rgba(247,247,49,1) 0%,rgba(63,63,63,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f731', endColorstr='#3f3f3f',GradientType=0 );

}

使用jQuery，可以添加或删除黄色类：

$('.background_animation_element').addClass('yellow');

由于CSS文件中的过渡时间属性，这将确保逐步过渡。

- arik

---

我确实考虑过这个问题，但我不确定当您动态添加类时，jQuery是否仍将使用CSS转换。 - Jake

所以我刚刚偶然发现了一个类似的问题，但是我似乎无法让它工作起来。我采用了@arik-so的答案，并将其放在这里（http://jsfiddle.net/PottyMonster/geXgH/）。过渡发生得非常快，几乎就像不支持渐变之间的过渡一样。我编辑了这个并且它在使用纯色背景时运行良好。 - Dan Twining

这里有一个更好的例子，展示了渐变无法工作，但是实心可以正常工作链接。也许我只是做错了什么小事情导致它不能正常工作呢？ - Dan Twining

我认为最好还是在一个新问题中发布这个内容。 - Dan Twining

我无法让它工作，它只是忽略了5秒的持续时间。 - Garret Kaye

Answer 4

我也需要这个，我在谷歌上搜索了一下，但没有找到任何解决方案，所以我自己想办法解决了。我用了一种不太正规的方法，但是有效 :) 这是我的代码：

interval = 0;
gradient_percent = 0;
interval_value = 5;
var interval_gradient = setInterval(function(){
    if(interval == 10) clearInterval(interval_gradient);

    gradient_percent += interval_value;
    $('.slider-text').css('background', 'linear-gradient(to right, #373535 '+gradient_percent+'%,rgba(0,0,0,0) 100%)');

    ++interval;
}, 50);

- Zulfugar Ismayilzadeh

Answer 5

你可以尝试使用Backgroundor，它是一个用于渐变动画的jQuery插件。

只需简单地编写$('#yourDivId').backgroundor();，它就能工作了！它有很多选项，比如改变渐变的角度和动画的时间。

- Khaled Al-Ansari

Answer 6

$('#btn').on('click', function(){
    $({num: 0}).animate({num: 100}, { //Анимация от 0 до 100
        duration: 2000, // Скорость анимации
        easing: "swing",
        step: function(val) {
            $('.mark').html(Math.ceil(val)+'%');
            $('.mark').css('background', 'linear-gradient(90deg, #5ac740 '+val+'%, #b19bb8 '+val+'%)');
        }
    });
});

.markwrapper{
    width:500px;
    height:25px;
    padding-bottom: 10px;
    display: table;
}

.mark{
    color: #ffffff;
    font-weight: 600;
    background: #b19bb8;
    font-size: 12px;
    font-family: 'FuturaPT',Arial,sans-serif;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 50px;
    box-sizing: border-box;
}

#btn{
    color: #ffffff;
    padding: 5px 20px;
    font-weight: 600;
    background: #828282;
    font-size: 12px;
    font-family: 'FuturaPT',Arial,sans-serif;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 50px;
    box-sizing: border-box;
    border: 0;
    cursor:pointer;
}

<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="markwrapper">
    <div class="mark">0%</div>
</div>
<div>
    <button id="btn">Click</button>
</div>  

Jquery 的背景

- Сергей Игошин

---

please add some explanation - Sfili_81

Answer 7

我用jQuery编写了一个解决方案，您可以定义颜色以及它们从一个颜色变为另一个颜色的顺序：

在下面的示例中，动画从绿色到紫色，然后返回到绿色，如此往复，直到动画在定义的秒数后停止。

var stopAfterSec = 23;
var speed = 15;

var purple = [255, 26, 26];
var green = [26, 255, 118];
var sea_green = [26, 255, 244];

var order = [green, sea_green, purple];

var current = 0;
var direction = -1;
var color = end_color = order[current];

function updateGradient() {
  if (color[0] == end_color[0] && color[1] == end_color[1] && color[2] == end_color[2]) {
    direction = (current > 0 && current < order.length - 1) ? direction : (-1) * Math.sign(direction);
    current += direction;
    end_color = order[current];
  }

  $('.animGradientEfron').css({
    background: "-webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 1) 0%, rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", 0.48) 100%)"
  });
  for (var i = 0; i <= 2; i++) {
    if (color[i] != end_color[i]) {
      color[i] += Math.sign((end_color[i] - color[i]));
    }
  }
}

jQuery(document).ready(function() {
  var startGradientAnimation = setInterval(updateGradient, speed);

  setTimeout(function() {
    clearInterval(startGradientAnimation);
  }, stopAfterSec * 1000);

});

.animGradientEfron {
  position: absolute;
  top: 25%;
  left: 0%;
  width: 100%;
  height: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="animGradientEfron"></div>

- Igor Еfron