JqueryUI - Animation couleur

jQueryUI étend certaines méthodes jQuery de base afin que vous puissiez animer différentes transitions pour un élément. L'un d'eux étant la méthode animée . jQueryUI étend la méthode d' animation jQuery , pour ajouter la prise en charge de l'animation des couleurs. Vous pouvez animer l'une des nombreuses propriétés CSS qui définissent les couleurs d'un élément. Voici les propriétés CSS prises en charge par la méthode animate .

backgroundColor - Définit la couleur d'arrière-plan de l'élément.
borderTopColor - Définit la couleur du côté supérieur de la bordure de l'élément.
borderBottomColor - Définit la couleur du bas de la bordure de l'élément.
borderLeftColor - Définit la couleur du côté gauche de la bordure de l'élément.
borderRightColor - Définit la couleur du côté droit de la bordure de l'élément.
color - Définit la couleur du texte de l'élément.
outlineColor- Définit la couleur du contour; utilisé pour mettre en valeur l'élément.

Syntaxe

Voici la syntaxe de la méthode d' animation jQueryUI -

$( "#selector" ).animate(
   { backgroundColor: "black",
      color: "white"
   }
);

Vous pouvez définir n'importe quel nombre de propriétés dans cette méthode, séparées par , (virgule).

Exemple

L'exemple suivant illustre l'utilisation des méthodes addClass () .

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('#button-1').click(function() {
               $('#animTarget').animate({
                  backgroundColor: "black",
                  color: "white"
               })
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button id = "button-1">Click Me</button>
   </body>
</html>

Sauvegardons le code ci-dessus dans un fichier HTML animateexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -

Cliquez sur le bouton et voyez comment l'animation change de la boîte.