jQuery 动画 div 背景颜色渐变？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10963059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate div background color gradient?
提问by Jake
I'm trying to build a background animation with jQuery which changes from one gradient to another. I know you can use the .animate() function to change solid background colors, but can this also be done for gradients?
我正在尝试使用 jQuery 构建一个背景动画，该动画从一个渐变变为另一个渐变。我知道您可以使用 .animate() 函数来更改纯背景色，但是这也可以用于渐变吗？
Here's a good example from some old Digg-style comments. I'm looking to do something like this animating from green to yellow
这是一些旧的 Digg 风格的评论中的一个很好的例子。我正在做这样的事情，从绿色到黄色的动画
采纳答案by arik
UPDATE: These days, all major browsers support CSS animations, which are way more reliable than jQuery. For reference, see Rohit's answer.
更新：现在，所有主流浏览器都支持 CSS 动画，这比 jQuery 更可靠。作为参考，请参阅Rohit 的回答。
OLD ANSWER:
旧答案：
Animating the backgrounds directly is nearly impossible with jQuery, at least I could think of no way. There is a way though with this:
使用 jQuery 直接动画背景几乎是不可能的，至少我想不出办法。不过有一种方法：
-webkit-transition: background 5s ;
-moz-transition: background 5s ;
-ms-transition: background 5s ;
-o-transition: background 5s ;
transition: background 5s ;
That ensures that there is a transition. You could for instance do that in CSS:
这确保了过渡。例如，您可以在 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 );
}
And, using jQuery, either add or remove the yellow class:
并且，使用 jQuery，添加或删除黄色类：
$('.background_animation_element').addClass('yellow');
That would ensure a gradual transition due to the transition duration property in the CSS file.
由于 CSS 文件中的过渡持续时间属性，这将确保逐渐过渡。
回答by lyyons
Animating the background with jQuery is definitely feasible, as seen in this CodePen (not my creation, but very slick): http://codepen.io/quasimondo/pen/lDdrF
使用 jQuery 为背景设置动画绝对是可行的，如 CodePen 所示（不是我的创作，但非常巧妙）：http://codepen.io/quasimondo/pen/lDdrF
The CodePen example uses some slick bitshifting and other tricks to determine the colors, but he just defines a function (updateGradient) that modifies the background's CSS and then wraps it in a setInterval.
CodePen 示例使用了一些巧妙的位移和其他技巧来确定颜色，但他只是定义了一个函数 (updateGradient) 来修改背景的 CSS，然后将其包装在 setInterval 中。
The big takeaway from the updateGradient is the following:
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%)"});
Then just set the color variables dynamically and you're gravy.
然后只需动态设置颜色变量即可。
回答by Rohit Suthar
Try this, work great -
试试这个，效果很好 -
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/
回答by Zulfugar Ismayilzadeh
I needed it too, i searched it in google. But didn't find any solution, so i solve this. I do with this dirty way, but worked :) This is my code:
我也需要它，我在谷歌搜索了它。但没有找到任何解决方案，所以我解决了这个问题。我用这种肮脏的方式做，但有效:) 这是我的代码：
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);
回答by Khaled Al-Ansari
You can try Backgroundor, it's a jquery plugin for grandient animation.
你可以试试Backgroundor，它是一个宏大动画的 jquery 插件。
It's so simple just write $('#yourDivId').backgroundor();and it will work! it got a lot options like change the degree of the gradient the time of the animation.
这么简单，只要写$('#yourDivId').backgroundor();就行了！它有很多选项，比如改变动画时间的渐变程度。
