Animer les positions de gradient CSS3 en utilisant jQuery

Est-il possible d'animer la position d'un CSS3-gradient-color en utilisant jQuery?

J'aimerais m'en animer

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 */ 

pour ça

 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 */ 

En xx millisecondes

Merci d'avance!

Soyez créatif … C'est un exemple de la façon dont je passe des transitions en gradient sans plugins supplémentaires.

J'utilise 2 divs identiques avec différents gradients en couches l'un sur l'autre. Ensuite, j'utilise jquery pour animer l'opacité de l'un sur le dessus …

Voici, étape par étape

  1. Créez une enveloppe avec une taille fixe, disons "largeur: 200px" et "hauteur: 100px" (j'utilise une enveloppe afin qu'il soit plus facile d'ajuster la position des divs à l'intérieur)
  2. Créez 2 divs qui ont la même taille que le wrapper donnent les deux gradients d'arrière-plan différents, mais utilisent le même contenu tant visuellement que la seule chose qui change est le gradient d'arrière-plan.
  3. Ajouter "position: relative;" Et ajustez la position du div qui sera en haut, dans ce cas box2 avec "bottom: 100px;" (Notez-vous la même valeur que la hauteur de l'emballage et les divs. Cela rend le div qui sera sur le dessus pour déplacer 100px se positionnant directement sur le div inférieur, par rapport à l'emballage … ce n'est pas possible sans utiliser "Position: relative;" sur le top div)
  4. Animez l'opacité de la div avec votre méthode préférée, j'utilise fadeToggle dans cet exemple

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 EN 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"); }); }); 

Vous pouvez calquer une troisième division afin que vous ne devez pas écrire le même contenu deux fois en ajoutant une seconde enveloppe en dehors de la première et en plaçant la troisième div après la fermeture de l'enveloppe intérieure.

Pour voir ceci, allez sur le lien suivant …

Lien vers l'exemple

Vous pouvez rendre le gradient deux fois plus important (ce qui signifie intégrer le premier dégradé dans les premiers 50% et le deuxième dégradé dans les 50% derniers), car il doit et utiliser ce code:

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

Sur l'élément initial et. Tous les préfixes ne fonctionnent pas, mais je le fais pour la compatibilité s'ils l'ajoutent plus tard

 background-position:bottom; 

Sur le vol stationnaire

Les transitions de gradient CSS n'ont pas encore été implémentées dans aucun des navigateurs, bien que ce soit dans la spécification. Donc, vous ne pouvez pas faire cela. Vous devrez le faire avec SVG (si vous êtes courageux).

Il s'agit d'un extrait de code de l'un de mes projets où j'utilise la transition en dégradé en utilisant jquery. Cela peut vous aider:

 <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();}); 

Je pense que vous devriez l'essayer en utilisant le switchClass de jquery ui, vous devez ajouter JqueryUI et un lien au cœur des effets de dépendance http://jqueryui.com/demos/switchClass/

quelque chose comme ça:

 <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> 

Cela fonctionne pour moi @localhost

Lauw

Qu'en est-il de l'animation de la largeur du conteneur auquel le gradient s'applique?

(Exemple pour Chrome avec 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); } ); 

Agit un régal

EDIT: J'ai fait une erreur ici en ce qui concerne la question initiale. Je vais laisser la réponse ici, car je pense qu'en utilisant plus d'éléments que d'un seul, la position du fondu pourrait être déplacée avec la fonction animate () dans un conteneur div, créant l'effet de la position de fondu glissant