jQuery UI API - Animación en color (Color de Animación)
jQuery UI núcleo añade efectos especiales utilizando el rgb() , rgba() , los valores hexadecimales o nombres de colores, tales como "aqua" para cambiar dinámicamente los atributos de color función. Sólo es necesario incluir jQuery UI archivo efectos núcleo, .animate() apoyará color.
Es compatible con los siguientes atributos:
-
backgroundColor -
borderBottomColor -
borderLeftColor -
borderRightColor -
borderTopColor -
color -
columnRuleColor -
outlineColor -
textDecorationColor -
textEmphasisColor
El apoyo a la animación del color del plugin de jQuery en color . Color de plug-in proporciona una serie de funciones para el color. Para ver el documento completo, visite los documentos jQuery color .
Clase de Animación (Clase Animaciones)
Aunque es posible para animar el color atributos directamente, pero por lo general mejor método alternativo que contiene los estilos en una clase de. jQuery UI proporciona métodos para añadir o eliminar dinámicamente clases CSS, a saber .addClass() , .removeClass() , .toggleClass() y .switchClass() . Estos métodos se determinará automáticamente qué propiedades tienen que ser cambiado y lo que tiene que aplicar la animación apropiada.
Ejemplos
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> Animación Color (Color de Animación) 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: 1 em;
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>
<Cuerpo>
<Div id = "elem"> Animación de color </ div>
<Botón id = "cambiar"> cambio de color </ botón>
<Script>
$ ( "#toggle") .click (Function () {
$ ( "#elem") .animate ({
de color: "verde",
backgroundColor: "rgb (20, 20, 20)"
});
});
</ Script>
</ Body>
</ Html>