Jquery animation div background color?

Question

I am trying to create a background animation with jQuery that changes from one gradient to another. I know that you can use the .animate () function to change solid background colors, but can this also be done for gradients?

Here is a good example from some old digg style comments. I want to do something like this, animating from green to yellow.

Answer 1

Animating the background directly is not possible with jQuery, at least I couldn't think of anything. There is a way, but with this:

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

This ensures a transition. You can, for example, do this in 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, add or remove the yellow class:

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

This will provide a gradual transition due to the transition duration property in the CSS file.

Answer 2

Animating a background using jQuery is definitely possible, as seen from this CodePen (not my creation, but very smooth): http://codepen.io/quasimondo/pen/lDdrF

The CodePen example uses some slick bithifting and other tricks to define colors, but it just defines a function (updateGradient) that modifies the background CSS and then wraps it in setInterval.

The big benefits of updateGradient are this:

  $('#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 are gravy.

Answer 3

I need this too, I searched for it on google. But I did not find a solution, so I solved it. I do it in a dirty way, but it 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); 

Answer 4

Try it, do a great job -

 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/

Answer 5

You can try Backgroundor , this is a jquery plugin for grand animation.

It's that simple to write $('#yourDivId').backgroundor(); and it will work! he received many options, such as changing the degree of the gradient during the animation.