J'essaie de créer un effet d'impulsion simple en modifiant la couleur d'arrière-plan en utilisant jQuery. Cependant, je ne peux pas obtenir le bouton de fond pour animer.
var bgcol = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcol}, 2000);
5 Réponses :
jQuery ne peut pas animer les couleurs par défaut. Afin d'animer des couleurs, utilisez l'officiel jquery.color plugin.
Toutes les propriétés animées doivent être animées à une seule valeur numérique, sauf indication contraire ci-dessous; La plupart des propriétés non numériques ne peuvent pas être animées à l'aide de la fonctionnalité de base JQuery (par exemple, la largeur, la hauteur ou la gauche peuvent être animées mais la couleur de fond ne peut pas être, à moins que le plugin JQuery.color () est utilisé).
Merveilleux! Merci pour l'explication pour laquelle BackgroundColor est exclu de la bibliothèque standard. J'ai créé une solution basée sur votre recommandation.
Pourquoi non seulement animer la propriété CSS: $ (dnid) .animate ({'fond-couleur': "# db1a35"}, 1200); Voir ma réponse ci-dessous
jQuery prend en charge l'animation entre toutes les propriétés numériques CSS , qui n'incluent pas les couleurs. Cependant, il existe d'autres bibliothèques qui font des couleurs d'animation possibles. Une de ces bibliothèques est la couleur JQuery . Son page README montre plusieurs exemples de la manière de l'utiliser pour animer entre les couleurs utilisant la jQuery .animate () fonction
Impressionnant. Je n'ai pas réalisé que JQuery Limited Animations à des propriétés numériques. Merci pour l'explication approfondie.
Vous devez d'abord définir l'arrière-plan de la couleur de la couleur ou que cela ne fera rien 2e fois.
Vous avez également dactais typé de la propriété CSS 'Color-Color' Code> et mettez-le dans des citations telles que je n'ai pas :) $(dnid).css({'background-color': "#ffffff"});
$(dnid).animate({'background-color': "#db1a35"}, 1200);
S'il y a d'autres propriétés de style sur la chose que vous ne voulez pas réinitialiser, vous pouvez simplement faire $ (dnid) .CSS ('fond-couleur', '#ffffff');
Est-ce que ça marche? Pouvez-vous jsfiddle ceci? Je ne pouvais pas obtenir ça pour travailler pour moi.
Désolé @ chud37 Il s'avère que je faisais usage de la bibliothèque JQueryui pour l'animation de couleur. jsfiddle.net/aw42aj2l
Utilisez l'animation CSS html CSS Animation Propriété et Keyframes
Merci pour cette option simple pour créer cet effet!
Vous êtes la bienvenue :) N'oubliez pas de vérifier la compatibilité du navigateur croisé si vous envisagez de l'utiliser dans la production
Cassé sur Firefox 27.0.1
Ajoutez simplement ceci sous votre script JQuery et vous avez terminé:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
Vous devrez utiliser JQuery Ui ou un plug-in couleur pour animer des couleurs.
Je ne sais pas si cela reste le cas, mais Jon se résit à faire un plugin d'arrière-plan pour les couleurs d'arrière-plan animées uniquement, ce n'est pas quelque chose intégré à JQuery.
Peut-être que cela devrait aider Stackoverflow.com/a/14362680/297641
@Davidthomas Je pense que JQuery a inclus une animation de couleur parfois arrière .. Stackoverflow.com/a/14362680/297641
@Vega: Je suis corrigé! Dans quelle version de jQuery a fait ce changement? (Je demande, bien que je vais regarder l'API dans un instant quand même ...). Non, attendez: l'API stipule toujours: "La largeur, la hauteur ou la gauche peut être animée mais la couleur de fond ne peut pas être, à moins que le plugin JQuery.color () soit utilisé."
Fonctionne pour moi dans jquery 1.9 jsfiddle.net/aaqht
@Davidthomas a l'air d'avoir été ajouté dans JQuery 1.9 version Jqueryui.com/changelog/1.9.0 sous effets.
@Vega, malgré l'API (ou mon malentendu de celui-ci), votre démo le prouve définitivement de travailler. Bizarre. Peut-être maintenant est le moment de l'expresso ...
Ouvrez votre console et tapez
$ ('# pied de page'). Animate ({'Color arrière-fond': '# 000000'}, 1200) et regarder le pied de page aller noir sur cette page.Dupliqué possible de JQuery Animate Backcolor