Efectos Toggle de JQuery

Escrito por ian low | Traducido por enrique pereira vivas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Efectos Toggle de JQuery
Un efecto toggle de JQuery se puede utilizar para dar una página web un aspecto y un sentimiento más acogedor. (Hemera Technologies/AbleStock.com/Getty Images)

Unos sutiles efectos de animación se pueden utilizar en un sitio web para hacer la experiencia interactiva más acogedora y amable. Estos efectos también se podrían utilizar para expresar una personalidad o estado de ánimo que puede ser una extensión de una imagen de marca o ideal. Alternativamente, se podría hacer un sitio web más estimulante para los propósitos educativos o de ocio. Para lograr estos efectos, la función "toggle ()" de JQuery permite a un objeto o conjunto de objetos, alternarse entre dos estados de apariciones y/o contenido.

Otras personas están leyendo

JQuery Toggle

JQuery es una biblioteca JavaScript. En menos de 92 kilobytes (la versión miniaturizada 1.6.1), se puede añadir a las secciones del cuerpo o de la cabeza de tu página HTML insertando la línea "<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></ script>". El objeto selector permite manejar conjuntos de objetos usando una selección coincidencia de patrones CSS. "toggle ()" es una función de objeto de evento selector. Necesita dos funciones en línea como parámetros. Estas funciones se pueden utilizar para establecer el contenido y las apariciones que definen los dos estados para un objeto dado. Cuando el usuario hace clic en la primera vez en un elemento coincidente, la primera función se ejecuta. En el segundo clic, la segunda función se ejecuta. En el tercer clic, la primera función se ejecuta de nuevo y así sucesivamente.

En el siguiente ejemplo, cuando el usuario hace el primer clic sobre cualquier objeto de la clase "botón", el valor de todos los objetos "botones" cambian a "cerrar", todos los objetos "<div>" están ocultos y todos los objetos con el atributo "id='span1'" son ajustados al color de fondo "#aaffaa" (luz verde). En el segundo clic, el valor de todos los objetos "botones" cambia para "abrir" todos los objetos"<div>" objetos reapareciendo y el color de fondo de todos los elementos con el atributo "id=span1" cambian a "#aaaaff "(azul claro). Por lo tanto, al usar líneas de código concisas, una página web puede ser alterada y restaurada en sólo un par de clics.

$('.button').toggle( function(){ $('.button').attr('value','close'); $('div').hide(); $('#span1').css('background-color','#aaffaa'); }, function(){ $('.button').attr('value','open'); $('div').show(); $('#span1').css('background-color','#aaaaff'); } );

Velocidad de la animación

La velocidad de la animación "hide()" y "show()" se puede controlar mediante la especificación de "lento", "rápido", "normal" o una duración en número de milisegundos. Por ejemplo, "$('#span1').hide(1000)" oculta todos los objetos con id "span1" en un segundo.

Deslizar y desvanecer

Además de los métodos "hide()" y "show()", el "slideUp()" y "slideDown()" y "fadeIn()" y "fadeOut()" se pueden utilizar para hacer desaparecer y aparecer los objetos del navegador, como su nombre lo indica, en los movimientos de "deslizar" y "desvanecer".

SlideToggle y FadeToggle

En lugar de utilizar dos funciones separadas en línea en una lista de parámetros "toggle()", un método sencillo "slideToggle()" o "fadeToggle()" puede ser utilizado dentro de la función de evento de clic para ocultar o mostrar objetos según corresponda. En el siguiente ejemplo, cuando se hace clic primero en "button1", "span1" se oculta lentamente usando "slideUp". Cuando "button1" se hace clic otra vez "span" se revela usando "slideDown()".

$('#button1').click(function(){ $('#span1').slideToggle('slow');});

JQuery Animate

El método selector "animate()" se puede utilizar para proporcionar una animación de suave transición. En el siguiente ejemplo, cuando el usuario hace clic en el botón "button1", "div1" cambia suavemente de un fondo azul de 400px píxeles de ancho, con un fondo verde de 400 píxeles de alto, y, finalmente, a un fondo blanco de 200 píxeles de alto, con cada transición tomando medio segundo.

$('#button1').click(function(){ $('#div1').animate({backgroundColor: 'blue', width:400}, 500); $('#div1').animate({backgroundColor: 'green', height:400}, 500); $('#div1').animate({backgroundColor: 'white', height:200}, 500); });

JQuery Animate Toggle

Para que una animación personalizada cambie entre dos estados, la cadena "toggle" se puede especificar como un ajuste en contra de la propiedad que va a sufrir el efecto de palanca, como "opacidad", "ancho" o "altura". En la línea de abajo, "div1" se desvanece a opacidad cero cuando se hace clic en "button1". En el segundo clic, "div1" se desvanece desde opacidad cero a normal.

$('#button1').click(function(){ $('#div1').animate({opacity: 'toggle'}, 500); });

Al utilizar la función de evento de palanca con funciones separadas de ocultamiento y de mostrar, uno puede especificar por separado los efectos de animación, como se muestra a continuación.

$('#button1').toggle( function(){ $('#div1').animate({width: 'hide'}, 500); }, function(){ $('#div1').animate({height: 'show'}, 1000); } );

La construcción de tu propio efecto toggle

Utilizando los métodos anteriores para especificar la duración y el movimiento de la animación, se puede construir cualquier número de efectos alternativos para crear el aspecto deseado y la sensación en el sitio. En el siguiente ejemplo, el fondo "div1" cambia a azul antes de que desaparezca en el primer clic. En el segundo clic, "div1" aparece con un fondo azul, que luego sin problemas cambia de nuevo a blanco.

$("#button1").toggle( function(){ $('#div1').animate({backgroundColor: 'blue', width:500}, 1000); $('#div1').animate({height: 'hide'}, 500); }, function(){ $('#div1').animate({height: 'show'}, 500); $('#div1').animate({backgroundColor: 'blue', width:500}, 500); $('#div1').animate({backgroundColor: 'white', width:500}, 500); });

Ten en cuenta que para utilizar animaciones de color de usuario uno necesita descargar e incorporar la biblioteca de colores de animación JQuery en la página (ver Recursos), utilizando una línea como ""<script type='text/javascript' src='jquery.color.js.txt'></ script>".

JQueryUI

JQueryUI es una extensión de la interfaz de usuario en la biblioteca de JavaScript de JQuery. Ofrece efectos para alternar más adaptables y especializados, así como otros reproductores opcionales y herramientas. Por ejemplo, permite alternar entre clases predefinidas CSS a través del método "toggleClass()" como se muestra a continuación.

$("#button1").click(function(){$("#div1").toggleClass("blueColorSchemeClass",1000);});

JQueryUI viene con nueve efectos de palanca pre-construidos, llamados "clip", "soltar", "explotar", "doblar", "resaltar", "pulsar", "escala", "movimiento" y "deslizar". Estos pueden ser llamados con los métodos "toggle()", "ocultar()" y "mostrar()", con parámetros opcionales para la personalización CSS y terminación de llamadas a la función de eventos. En el siguiente ejemplo, cuando se hace clic en "button1", "div1" se oculta utilizando el "clip" efecto. El mensaje de alerta "done" aparece al finalizar el efecto. Al hacer clic de nuevo, "div1" reaparece con el mismo efecto y el mensaje de alerta de finalización.

$('#button1').click(function(){ $( "#div1" ).toggle( "pulsate", {width:100, height: 100}, 1000, function(){alert('done');} ); });

Las demostraciones de trabajo de los efectos de palanca JQuery y JQueryUI están disponibles en línea, (ver Recursos).

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles