jQuery animate div couleur d'arrière-plan en dégradé?

Je suis en train de construire un arrière-plan de l'animation avec jQuery qui change à partir d'un dégradé à l'autre. Je sais que vous pouvez utiliser .animate() de la fonction de changement de solides, des couleurs de fond, mais cela peut aussi être fait pour les dégradés?

Voici un bon exemple de certains vieux Digg-les commentaires de style. Je cherche à faire quelque chose comme ceci animation du vert au jaune

jQuery animate div couleur d'arrière-plan en dégradé?

Reportez-vous à cette Jquery fond animer et JQuery couleur d'arrière-plan animer ne fonctionne pas

OriginalL'auteur Jake | 2012-06-09

  1. 4

    Mise à JOUR le: Ces jours-ci, tous les principaux navigateurs prennent en charge les animations CSS, qui sont bien plus fiable que jQuery. Pour référence, voir Rohit de réponse.

    VIEILLE RÉPONSE:

    Animer les milieux directement est presque impossible avec jQuery, au moins je pouvais penser d'aucune façon. Il y a une manière bien à ceci:

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

    Qui assure une transition. Vous pouvez par exemple le faire en 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 );
}

    Et, à l'aide de jQuery, ajouter ou supprimer le jaune catégorie:

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

    Qui permettrait d'assurer une transition progressive en raison de la durée de la transition de la propriété dans le fichier CSS.

    J'ai fait de penser à cela, mais je ne suis pas sûr que jQuery sera effectivement toujours utiliser les transitions css lorsque vous ajoutez une classe dynamiquement.
    Oh ouais, c'est vrai. J'ai réellement faire que sur certains projets de mon propre. Il n'est pas jQuery mais qui ne les transitions.
    Donc, je viens de tombé sur ce avec un problème similaire mais je n'arrive pas à le faire fonctionner. J'ai pris @arik-si 's réponse et de le mettre ici Une transition se produit instantanément, presque comme si la transition entre les gradients n'est pas pris en charge. J'ai édité ce et il fonctionne très bien avec un fond uni de couleur.
    Je pense que c'est prob mieux que je post cette dans un nouvelle question.
    Je ne peux pas obtenir que cela fonctionne, il ignore juste les 5s durée

    OriginalL'auteur arik

  2. 6

    L'animation de l'arrière-plan avec jQuery est certainement possible, comme on le voit dans cette CodePen (pas de ma création, mais très lisse):
    http://codepen.io/quasimondo/pen/lDdrF

    La CodePen exemple utilise une partie de la nappe de bitshifting et autres astuces pour déterminer les couleurs, mais il définit une fonction (updateGradient) qui modifie l'arrière-plan CSS et puis l'enveloppe dans un setInterval.

    La grande emporter à partir de la updateGradient est la suivante:

     $('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"),
to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

    Alors juste la couleur des variables dynamiquement et vous êtes à la sauce.

    Puis-je utiliser plusieurs couleurs dans la de() à() attributs pour gérer des dégradés plus complexes (c'est à dire radial)?

    OriginalL'auteur lyyons

  3. 2

    J'ai besoin aussi, j'ai cherché dans google. Mais n'a pas trouvé de solution, j'ai donc résoudre ce problème. - Je faire avec cette façon sale, mais il a travaillé 🙂
    C'est mon 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);

    OriginalL'auteur Zulfugar Ismayilzadeh

  4. 0

    Vous pouvez essayer Backgroundor, c'est un plugin jquery pour grandient animation.

    C'est simple il suffit d'écrire $('#yourDivId').backgroundor(); et il va fonctionner! il a beaucoup d'options comme modifier le degré de la pente, le temps de l'animation.

    OriginalL'auteur Khaled Al-Ansari