jQuery UI API - Animation de couleur

Le cœur des effets de jQuery UI ajoute la possibilité d'utiliserrgb()、rgba(), des valeurs hexadécimales, ou des noms de couleurs tels que"aqua"pour modifier dynamiquement la propriété color. Il suffit d'inclure le fichier core des effets de jQuery UI,.animate()et la couleur sera prise en charge.

Les propriétés suivantes sont prises en charge :

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• color
• columnRuleColor
• outlineColor
• textDecorationColor
• textEmphasisColor

La prise en charge des animations de couleur est assurée parle plugin jQuery Color. Le plugin Color fournit un certain nombre de fonctions pour les couleurs. Pour la documentation complète, veuillez consulterla documentation de jQuery Color。

Animations de classes

Bien que vous puissiez animer directement la propriété color, il existe généralement une meilleure approche : inclure les styles dans une classe. jQuery UI fournit des méthodes pour ajouter ou supprimer dynamiquement des classes CSS, à savoir.addClass()、.removeClass()、 .toggleClass()et.switchClass(). Ces méthodes déterminent automatiquement quelles propriétés doivent être modifiées et lesquelles nécessitent des animations appropriées.

Exemples

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>颜色动画（Color Animation）演示</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #elem {
    color: #006;
    background-color: #aaa;
    font-size: 25px;
    padding: 1em;
    text-align: center;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="elem">颜色动画</div>
<button id="toggle">改变颜色</button>
 
<script>
$( "#toggle" ).click(function() {
  $( "#elem" ).animate({
    color: "green",
    backgroundColor: "rgb( 20, 20, 20 )"
  });
});
</script>
 
</body>
</html>