Efectos de jQuery
jQuery puede crear efectos de ocultar, mostrar, alternar, deslizar y animaciones personalizadas, entre otros.
Pruebe usted mismo
Pruebe este efecto jQuery:
CodeW3C.com - El sitio web líder en tutoriales de tecnología web
En CodeW3C.com, puede encontrar todos los tutoriales de construcción de sitios web que necesita.
Haga clic aquí
Ejemplo
- jQuery hide()
- Demostración de la función jQuery hide().
- jQuery hide()
- Otra demostración de hide(). Cómo ocultar parte del texto.
- jQuery slideToggle()
- Demostración de un efecto de panel deslizable simple.
- jQuery fadeTo()
- Demostración de la función jQuery fadeTo().
- jQuery animate()
- Demostración de la función jQuery animate().
Ocultar y mostrar de jQuery
A través de las funciones hide() y show(), jQuery admite la ocultación y visualización de elementos HTML:
Ejemplo
$\("#hide\").click(function(){
$\("p\").hide();
});
$\("#show\").click(function(){
$\("p\").show();
});
Las funciones hide() y show() pueden establecer dos parámetros opcionales: speed y callback.
Sintaxis:
$\$(selector).hide(speed,callback) $\$(selector).show(speed,callback)
speed El parámetro especifica la velocidad de ocultamiento o mostrado. Puedes configurar estos valores: "slow", "fast", "normal" o en milisegundos.
callback Los parámetros son los nombres de las funciones que se ejecutan después de que se completan las funciones hide o show. Aprenderás más sobre esto en los capítulos siguientes de este tutorial. callback Conocimiento de los parámetros.
Ejemplo
$("button").click(function(){
$\("p\").hide(1000);
});
Toggle de jQuery
La función toggle() de jQuery utiliza las funciones show() o hide() para cambiar el estado de visibilidad de los elementos HTML.
Oculta los elementos visibles y muestra los elementos ocultos.
Sintaxis:
$\$(selector).toggle(speed,callback)
speed El parámetro puede configurar estos valores: "slow", "fast", "normal" o en milisegundos.
Ejemplo
$("button").click(function(){
$\("p\").toggle();
});
callback El parámetro es el nombre de la función que se ejecuta después de que el función se complete. Aprenderás más sobre esto en los capítulos siguientes de este tutorial. callback Conocimiento de los parámetros.
Funciones de deslizamiento de jQuery - slideDown, slideUp, slideToggle
jQuery tiene las siguientes funciones de deslizamiento:
$\$(selector).slideDown(speed,callback) $\$(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed Los parámetros pueden configurar estos valores: "slow", "fast", "normal" o en milisegundos.
callback El parámetro es el nombre de la función que se ejecuta después de que el función se complete. Aprenderás más sobre esto en los capítulos siguientes de este tutorial. callback Conocimiento de los parámetros.
Ejemplo de slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
Ejemplo de slideUp()
$(".flip").click(function(){
$(".panel").slideUp();
});
Ejemplo de slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});
Funciones de Desvanecimiento de jQuery - fadeIn(), fadeOut(), fadeTo()
jQuery tiene las siguientes funciones fade:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed El parámetro puede configurar estos valores: "slow", "fast", "normal" o en milisegundos.
En la función fadeTo() opacity El parámetro especifica el atenuación hasta la opacidad dada.
callback El parámetro es el nombre de la función que se ejecuta después de que el función se complete. Aprenderás más sobre esto en los capítulos siguientes de este tutorial. callback Conocimiento de los parámetros.
Ejemplo de fadeTo()
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Ejemplo de fadeOut()
$("button").click(function(){
$("div").fadeOut(4000);
});
Animaciones personalizadas de jQuery
La sintaxis de la función jQuery para crear animaciones personalizadas es:
$(selector).animate({params},[duration],[easing],[callback])
El parámetro clave es paramsDefine las propiedades CSS utilizadas para la animación. Puede configurar múltiples propiedades de este tipo al mismo tiempo:
$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
El segundo parámetro es durationDefine el tiempo aplicado al animar. El valor configurado es: "slow", "fast", "normal" o en milisegundos.
Ejemplo 1
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
Ejemplo 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
Los elementos HTML son de posición estática por defecto y no se pueden mover.
Para que el elemento pueda moverse, configure CSS position como relative o absolute.
jQuery efectos - De esta página
| Función | Descripción |
|---|---|
| $(selector).hide() | Ocultar el elemento seleccionado |
| $(selector).show() | Mostrar el elemento seleccionado |
| $(selector).toggle() | Alternar (entre ocultar y mostrar) el elemento seleccionado |
| $(selector).slideDown() | Deslizar hacia abajo (mostrar) el elemento seleccionado |
| $(selector).slideUp() | Deslizar hacia arriba (ocultar) el elemento seleccionado |
| $(selector).slideToggle() | Alternar deslizamiento hacia arriba y hacia abajo en el elemento seleccionado |
| $(selector).fadeIn() | Enfocar el elemento seleccionado |
| $(selector).fadeOut() | Desvanecer el elemento seleccionado |
| $(selector).fadeTo() | Desvanecer el elemento seleccionado a la opacidad dada |
| $(selector).animate() | Ejecutar animaciones personalizadas en elementos seleccionados |
Para obtener el manual de referencia completo, visite nuestra Manual de referencia de efectos jQuery.
