Latest web development tutorials

jQuery UI API - Couleur Animation (couleur Animation)

noyau jQuery UI ajoute des effets spéciaux à l' aide du rgb() , rgba() , des valeurs hexadécimales ou des noms de couleur tels que "aqua" pour modifier dynamiquement les attributs de couleur de la fonction. Seulement vous devez inclure jQuery UI fichier de base d'effets, .animate() soutiendra la couleur.

Il prend en charge les attributs suivants:

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

Prise en charge de l' animation de couleur du plugin jQuery couleur . Couleur plug-in fournit un certain nombre de fonctions pour la couleur. Pour voir le document complet, visiter les documents jQuery couleur .

Animations Class (Classe Animations)

Bien qu'il soit possible d'animer la couleur des attributs directement, mais généralement meilleure méthode alternative qui contient 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 permettront de déterminer automatiquement les propriétés doivent être modifiées et ce qui doit appliquer l'animation appropriée.

Exemples 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> Couleur Animation (couleur Animation) 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"> Couleur animation </ div>
<Bouton id = "toggle"> changer de couleur </ button>
 
<Script>
$ .cliquez ( "#toggle") (Function () {
  $ ( "#elem") .animate ({
    couleur: «verte»,
    backgroundColor: "rgb (20, 20, 20)"
  });
});
</ Script>
 
</ Body>
</ Html>

la