jQuery动画div背景颜色渐变？

我正在尝试用jQuery构建一个背景动画，它从一个渐变变为另一个渐变。 我知道你可以使用.animate（）函数来改变纯色背景颜色，但是这也可以用于渐变吗？

这是一些旧的Digg风格评论的好例子。 我正在寻找这样的动画，从绿色到黄色

在此处输入图像描述

更新：现在，所有主流浏览器都支持CSS动画，这比jQuery更可靠。 作为参考，请参阅Rohit的回答。

老答案：

使用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文件中的转换持续时间属性而逐渐过渡。

使用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%)"});

然后动态设置颜色变量，你就是肉汁。

试试这个，工作得很好 – 

 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%} }

我也需要它，我在谷歌搜索它。 但没有找到任何解决方案，所以我解决了这个问题。 我用这种肮脏的方式，但工作:)这是我的代码： 

 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);

您可以尝试使用Backgroundor ，它是一个用于大型动画的jquery插件。

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

Interesting Posts