Animate CSS3 gradient positions using jQuery

Question

Is it possible to animate the position of a CSS3 gradient color using jQuery?

I would like to revive from this

background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%, #FFFFFF 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000), color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */ 

to that

 background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%, #FFFFFF 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); /* webkit */ 

in xx milliseconds

Thank you in advance!

Answer 1

Be creative . This is an example of how I do gradient transitions without additional plugins.

I use 2 identical divs with different gradients, layered one on top of the other. Then I use jquery to animate the opacity on top.

Here it is step by step

• Create a wrapper with a fixed size, say, "width: 200px" and "height: 100px" (I use a wrapper to make it easier to adjust the position of sections within it).
• create 2 divs that are the same size as the wrapper, give both different background gradients, but use the same content for both visually, the only thing that changes is the background gradient.
• add "position: relative;" and adjust the position of the div to be on top, in this case box2 with "bottom: 100px;" (pay attention to the same value as the height of the wrapper and divs. This makes the div that will be on top to move up 100px positioning directly above the bottom div relative to the wrapper ... this is impossible without using "position: relative;" in the top div)
• animate the opacity of the div with your preferred method. I am using fadeToggle in this example.

HTML -----

 <a href="#">Click to change gradient</a><br> <div align="center" style="width:200px; height:100px;"> <div style="width:200px; height:100px;" class="box1" id="box1">CONTENT BOTTOM DIV</div> <div style="width:200px; height:100px; position:relative;" class="box2" id="box2">CONTENT TOP DIV</div> </div> 

GRADIENTS IN CSS -----

 .box1 { background: rgb(237,144,23); /* Old browsers */ background: -moz-linear-gradient(top, rgba(237,144,23,1) 0%, rgba(246,230,180,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,144,23,1)), color-stop(100%,rgba(246,230,180,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(237,144,23,1) 0%,rgba(246,230,180,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed9017', endColorstr='#f6e6b4',GradientType=0 ); /* IE6-9 */ } .box2 { background: rgb(246,230,180); /* Old browsers */ background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);/* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(237,144,23,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */ } 

jQuery animation ----

 $(document).ready(function(){ $("a").click(function(){ $("#box2").fadeToggle(100, "linear"); }); }); 

you can fold the third div so you don't have to write the same content twice, adding a second shell outside the first and placing the third div after closing the inner shell.

To view this, click on the following link ..

Link to an example

Answer 2

You can make the gradient twice as large (which means the first gradient in the first 50%, and the second gradient in the last 50%), as needed, and use this code:

 -webkit-background-size: 200%; -moz-background-size: 200%; -o-background-size: 200%; -ms-background-size: 200%; background-size: 200%; 

in the source element and. Not all prefixes will work, but I do this for compatibility if they add it later

 background-position:bottom; 

In hover mode

Answer 3

CSS gradient transitions are not yet implemented in any of the browsers, although this is in the specification. Therefore, you cannot do this. You will need to do this with SVG (if you are brave).

Answer 4

This is a code snippet of one of my projects in which I use gradient transition using jquery. This may help you:

 <div id="gr_anim"> Change Gradient </div> var p1 = t = 0; var p2 = 100; function hello() { p1 = p1 + 5; p2 = 100 - p1; if(p1 <= 100 && p2 >= 0) { $('#gr_anim').css({ 'background-image':'-moz-linear-gradient('+ p1 +'% '+ p2 +'% 45deg, #000, #fff)' }); } else { clearTimeout(t); } t = setTimeout('hello()',1000);} $( function() { hello();}); 

Answer 5

I think you should try it with jquery ui switchClass, you need to add JqueryUI and a link to the dependency core http://jqueryui.com/demos/switchClass/

something like that:

 <script type="text/javascript"> $(function() { $("#button").click(function () { $(".divPropertyStart").switchClass("divPropertyStart", "divProperty", 1000); $(".divProperty").switchClass("divProperty", "divPropertyStart", 1000); return false; }); }); </script> <style type="text/css"> .divPropertyStart { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 0%, #FFFFFF 0%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(0%,#FF0000), color-stop(0%,#FFFFFF), color-stop(100%,#FFFFFF)); } .divProperty { background: -moz-linear-gradient(top, #FF0000 0%, #FF0000 50%, #FFFFFF 50%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(50%,#FF0000), color-stop(50%,#FFFFFF), color-stop(100%,#FFFFFF)); } </style> <div class="divPropertyStart"></div> <a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a> 

This works for me @localhost

Laua

Answer 6

how about animating the width of the container the gradient is applied to?

(example for Chrome with jQuery)

HTML:

 <div id='test'> </div> <span id='click_me'> </span> 

CSS

  #test { width:400px; height: 400px; float:left; background: linear-gradient(90deg, #5e5e5e 0%, #000 100%); } 

JS:

 $('#click_me').on('click',function () { $('#test').animate({'width':'+=400'},400); } ); 

works with treatment

EDIT: I made a mistake here regarding the original question. I'm going to leave the answer here, although, in my opinion, when using more elements than just one, the fade position can be moved using the animate () function in the div container, creating the effect of shifting the position of the slide