Latest web development tutorials

jQuery UI API - Animazione di colore (animazione di colore)

nucleo jQuery UI aggiunge effetti speciali utilizzando il rgb() , rgba() , i valori esadecimali o nomi dei colori, come "aqua" per modificare dinamicamente gli attributi funzione di colore. Solo è necessario includere jQuery UI file core effetti, .animate() sosterrà colore.

Supporta i seguenti attributi:

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

Il supporto per l'animazione di colore dal plugin per jQuery colori . Colore plug-in fornisce una serie di funzioni per il colore. Per visualizzare il documento completo, visitare i documenti jQuery colore .

Animazione Class (Class animazioni)

Anche se è possibile animare colore attributi direttamente, ma solitamente meglio metodo alternativo che contiene gli stili in una classe di. jQuery UI fornisce i metodi per aggiungere o rimuovere dinamicamente classi CSS, vale a dire .addClass() , .removeClass() , .toggleClass() e .switchClass() . Questi metodi determinerà automaticamente quali proprietà devono essere cambiati e ciò che deve applicare l'animazione appropriata.

Esempi 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> di animazione di colore (colore Animazione) Demo </ 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"> Animazione di colore </ div>
<Button id = "Toggle"> cambiamento di colore </ button>
 
<Script>
$ ( "#toggle") .Click (Function () {
  $ ( "#elem") .animate ({
    colore: "verde",
    backgroundColor: "rgb (20, 20, 20)"
  });
});
</ Script>
 
</ Corpo>
</ Html>