animate CSS3 gradient-positions using jQuery

Question

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

I'd like to animate 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 this

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 extra plugins..

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

Here is it step by step

1. create a wrapper with a fixed size lets say "width:200px" and "height:100px" (I use a wrapper so that its easier to adjust the position of the divs inside it)
2. create 2 divs that are the same size as the wrapper give both different background gradients but use the same content for both so visually the only thing that changes is the background gradient.
3. add "position:relative;" and adjust the position of the div that will be on top, in this case box2 with "bottom:100px;" (notice its the same value as the height of the wrapper and the divs. This makes the div that will be on top to move up 100px positioning itself right over the lower div, relative to the wrapper... this is not possible without using "position:relative;" on the top div)
4. animate the opacity of the div with your preferred method i use 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 layer a third div so that you dont need to write the same content twice by adding a second wrapper outside the first one and placing the third div after the inside wrapper closes..

to view this go to the following link..

Link to example

Answer 2

You can make the gradient twice as big (meaning incorporate the first gradient in the first 50%, and the second gradient in the last 50%) as it needs to and use this code:

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

on the initial item and. Not all the prefixes will work, but I do it for compatibility if they add it later

background-position:bottom;

On the hover

Answer 3

CSS gradient transitions haven't been implemented in any of the browsers yet, although it's in the spec. So, you can't do this. You'll need to do this with SVG (if you're brave).

Answer 4

This is a code snippet of one of my project where 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

what about animating the width of the container to which the gradient applies ?

(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 a treat

EDIT: I've made a mistake here as regards the original question. I am going to leave the answer here though as I think that by using more elements than just one the position of the fade could be moved about with the animate() function within a container div, creating the effect of the fade position sliding

Answer 6

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

something like this:

<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

Lauw