jQuery动画div背景颜色渐变？
Posted
技术标签:
【中文标题】jQuery动画div背景颜色渐变？【英文标题】：jQuery animate div background color gradient? 【发布时间】：2012-06-13 08:26:49 【问题描述】：我正在尝试使用 jQuery 构建一个背景动画，该动画从一种渐变变为另一种渐变。我知道您可以使用.animate() 函数来更改纯色背景颜色，但是这也可以用于渐变吗？
这里有一个很好的例子，来自一些旧的 Digg 风格的 cmets。我想做这样的事情，从绿色到黄色的动画
【问题讨论】：
参考这个 Jquery background animate 和 JQuery background color animate not working 【参考方案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%)");
然后只需动态设置颜色变量，你就可以了。
【讨论】：
我可以在 from() to() 属性中使用多种颜色来处理更复杂的渐变（即径向）吗？【参考方案2】：更新：如今，所有主流浏览器都支持 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 文件中的过渡持续时间属性，这将确保逐步过渡。
【讨论】：
我确实想到了这一点，但我不确定当你动态添加一个类时 jQuery 是否真的会使用 css 转换。 哦，是的。我实际上是在我自己的一些项目中这样做的。虽然它不是 jQuery 的转换。 所以我偶然发现了一个类似的问题，但我似乎无法让它工作。我接受了@arik-so 的回答并把它放在here 转换瞬间发生，几乎就像不支持渐变之间的转换一样。我对此进行了编辑，它在纯色背景下效果很好。 我认为最好将其发布到new question。 我无法让它工作它只是忽略了 5 秒的持续时间【参考方案3】：试试这个，效果很好 -
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>来源 - https://www.gradient-animator.com/
【讨论】：
【参考方案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);
【讨论】：
【参考方案5】：你可以试试Backgroundor，这是一个用于宏大动画的jquery插件。
很简单，只要写$('#yourDivId').backgroundor();就行了！它有很多选项，比如改变动画时间的渐变程度。
【讨论】：
【参考方案6】：我用 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>【讨论】：
【参考方案7】：$('#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
【讨论】：
请补充说明以上是关于jQuery动画div背景颜色渐变？的主要内容，如果未能解决你的问题，请参考以下文章