JqueryUI - Animazione a colori

jQueryUI estende alcuni metodi jQuery di base in modo da poter animare diverse transizioni per un elemento. Uno di loro è il metodo animato . jQueryUI estende il metodo jQuery animate , per aggiungere il supporto per l'animazione dei colori. Puoi animare una delle numerose proprietà CSS che definiscono i colori di un elemento. Di seguito sono riportate le proprietà CSS che le animate supporti di metodo.

  • backgroundColor - Imposta il colore di sfondo dell'elemento.

  • borderTopColor - Imposta il colore per il lato superiore del bordo dell'elemento.

  • borderBottomColor - Imposta il colore per il lato inferiore del bordo dell'elemento.

  • borderLeftColor - Imposta il colore per il lato sinistro del bordo dell'elemento.

  • borderRightColor - Imposta il colore per il lato destro del bordo dell'elemento.

  • color - Imposta il colore del testo dell'elemento.

  • outlineColor- Imposta il colore per il contorno; usato per enfatizzare l'elemento.

Sintassi

Quanto segue è la sintassi del metodo jQueryUI animate -

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

È possibile impostare un numero qualsiasi di proprietà in questo metodo separate da , (virgola).

Esempio

L'esempio seguente mostra l'uso dei metodi 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>

Salviamo il codice sopra in un file HTML animateexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Fare clic sul pulsante e vedere come cambia l'animazione della scatola.