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