Latest web development tutorials

Ejemplos de jQuery UI - Animación en color (color) Animación

Utilice .animate () para lograr la animación de color.

Para obtener más información acerca de la animación en color (Color Animación) más detalles, consulte la documentación de la API de animación en color (Color de Animación) .

jQuery UI incluido plugin de jQuery en color, plugin de jQuery color proporciona la animación de color y muchas otras funciones de utilidad relacionados con el color.

Anime (animación) Demo

Haga clic en el botón de vista previa de efectos.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI Efectos - Animación (Animación) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
    .toggler {width: 500px; altura: 200px; position: relative;}
    botón # {padding: 1 em .5em; text-decoration: none;}
    #effect {width: 240px; altura: 135px; padding: 0.4em; position: relative; fondo: #fff;}
    #effect h3 {margin: 0; padding: 0.4em; text-align: center;}
  </ Style>
  <Script>
  $ (Function () {
    var state = true;
    $ ( "Botón #") .click (function () {
      si (estado) {
        $ ( "#effect") .animate ({
          backgroundColor: "# aa0000",
          de color: "#fff",
          Ancho: 500
        }, 1000);
      } Else {
        $ ( "#effect") .animate ({
          backgroundColor: "#fff",
          Color: "# 000",
          Ancho: 240
        }, 1000);
      }
      Estado = estado !;
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "basculador">
  <Div id = "efecto" class = "ui-ui widget de-contenido-esquina-all">
    <H3 class = "ui-ui widget de cabecera-esquina-all"> animado (Animación) </ h3>
    <P>
      Etiam libero ñeque, luctus un eleifend nec, sempre en, lorem. Sed pede. Metus Nulla lorem, ut adipiscing, luctus sed, hendrerit vitae, mi.
    </ P>
  </ Div>
</ Div>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> efectos de conmutación </a>
 
 
</ Body>
</ Html>

Ver demo