Vidéo: Technology Stacks - Computer Science for Business Leaders 2016 2025
Si vous voulez effectuer une animation couleur réelle dans votre application, vous devez utiliser la méthode animate () dans CSS3. Cette méthode semble être un travail en cours parce que la documentation pour elle n'est pas aussi bien écrite que l'autre documentation pour l'interface utilisateur jQuery.
La méthode semble fonctionner pour toutes les plates-formes et tous les navigateurs principaux, mais vous devez essayer de vous assurer qu'elle fonctionnera pour tous les navigateurs que vous devez cibler. La couleur va effectivement transition dans ce cas. Il est également possible de contrôler les couleurs du texte dans une large mesure.
L'exemple suivant montre les transitions les plus couramment utilisées. (Vous pouvez trouver le code complet de cet exemple dans le dossier Chapter 06Animations du code téléchargeable sous la forme Animate.HTML.)
$ (function () {// Suivre l'état normal var State = true; $ ("# ChangeColors "). click (function () {if (State) {// Mettre à l'état modifié. $ (" # SampleText "). animate ({backgroundColor:" # 0000ff ", couleur:" white ", borderColor:" # ff0000 ", height: 100, width: 600}, 1500);} else {// Mettre à l'état normal. $ (" # SampleText "). animate ({backgroundColor:" # 7fffff ", couleur:" black ", borderColor: "# 00ff00", height: 50, width: 400}, 1500);} // Changer l'état State =! State;})})
Si vous pensez que ce code a l'air de fonctionner Similaire à CSS, c'est le cas, mais la méthode animate () fournit une liste de fonctionnalités considérablement réduite.
Vous pouvez modifier de nombreuses fonctions du texte et du conteneur qui le contient, y compris la largeur et la hauteur. Cependant, vous ne pouvez pas changer des choses comme le type de bordure utilisé pour tout contenir - même si vous pouvez changer la couleur de la bordure. La documentation de l'interface utilisateur jQuery indique que animate () prend en charge ces propriétés:
-
backgroundColor
-
borderBottomColor
-
borderLeftColor
-
borderRightColor
-
borderTopColor
-
couleur
-
columnRuleColor
-
outlineColor
-
textDecorationColor
-
textEmphasisColor
Les exemples fournis par la bibliothèque (ceux fournis par le fournisseur sur le site du fournisseur) montrent que quelques autres propriétés sont supportées, notamment width, height et borderColor. Utilisez ces propriétés non publiées avec soin. Même s'ils fonctionnent maintenant, ils ne seront peut-être pas pris en charge dans les prochaines versions de la bibliothèque.
