jQuery ofrece una interfaz simple trivial para hacer diferentes tipos de efectos asombrosos. jQuery nos permite metodos para aplicar efectos rapidamente con la configuracion minima. Este tutorial cubre todos los metodos importantes de jQuery para crear efectos visuales.
Mostrar y ocultar elementos
Los comandos para mostrar y ocultar elementos son bastante lo que se espera. show() para mostrar los elementos en un conjunto envuelto y hide() para ocultarlos.
Sintaxis
Aqui esta la sintaxis para el metodo show():
[selector].show(speed,[callback]);
Aqui la descripcion de todos los parametros:
speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).
callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.
La siguiente sintaxis es para el metodo hide():
[selector].hide(speed,[callback]);
Aqui la descripcion de todos los parametros:
speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).
callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.
Ejemplo:
Considere el siguiente archivo HTML como un pequeño codigo jQuery:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
$(".midiv").show(1000);
});
$("#hide").click(function(){
$(".midiv").hide(1000);
});
});
</script>
<style type="text/css">
.midiv{
margin:10px;
padding: 12px;
border:2px solid #666;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="midiv">
Este es un CUADRADO
</div>
<input type="button" id="hide" value="Ocultar" />
<input type="button" id="show" value="Mostrar" />
</body>
</html>
Alternar los elementos
jQuery ofrece metodos para cambiar el estado de la visualizacion de los elementos entre mostradas u ocultas. Si el elemento se muestra al principio, se oculta. Si se oculta, se mostrará.
Sintaxis
Aqui se muestra la sintaxis para el metodo toggle():
[selector].toggle(speed,[callback]);
Aqui la descripcion de todos los parametros:
speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).
callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.
Ejemplo:
Podemos animar a cualquier elemento como un simple <div> que contiene una imagen.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".clic").click(function(event){
$(".target").toggle('slow',function(){
$(".log").text('Transicion completa');
});
});
});
</script>
<style type="text/css">
.clic{
margin:10px;
padding: 12px;
border:2px solid #666;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="clic">
Dame clic
</div>
<div class="target">
<img src="imgs/jquery.jpg" alt="jQuery" />
<div class="log"></div>
</div>
</body>
</html>
jQuery Metodos para efectos
Han visto el concepto basico de los efectos en jQuery. La siguiente tabla enumera todos los metodos importantes para crear diferentes tipos de efectos:
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| Metodos | Descripcion |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| animate(params,[duration,easing,callback]) | Una funcion para hacer animaciones. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeIn(speed,[callback]) | Desaparece hacia adentro en todos los elementos que coincidan |
| | ajustando su opacidad y disparar un callback opcional despues de |
| | terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeOut(speed,[callback]) | Desaparece hacia afuera en todos los elementos que coincidan, si su opacidad |
| | es ajustado a 0, display se muestra en "none", dispara una funcion despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeTo(speed,opacity,[callback]) | Le asigna una opacidad especifica a todos los elementos que coincidan y dispara un callback |
| | opcional despues de terminar la transicion. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| hide() | Esconde cada uno de los elementos que coincidan si son mostrados. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| hide(speed,[callback]) | Oculta todos los elementos coincidentes con una elegante animacion y dispara un callback |
| | opcional despues de terminar la transicion. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| show() | Muestra cada uno de los elementos que coincidan si estan ocultos. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| show(speed,[callback]) | Muestra todos los elementos que coincidan con una elegante animacion y dispara un callback |
| | opcional despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideDown(speed,[callback]) | Muestra todos los elementos que coincidan ajustandose en altura, dispara un callback opcional |
| | despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideToggle(speed,[callback]) | Alterna la visibilidad de todos los elementos que coincidan ajustandose en altura, dispara un |
| | callback opcional despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideUp(speed,[callback]) | Oculta todos los elementos que coincidan ajustandose en altura, dispara un callback |
| | opcional despues de terminar. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| stop([clearQueue,gotoEnd]) | Detiene todas las animaciones ejecutandose en los elementos especificados. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| toggle() | Alterna la visibilidad de todos los elementos que coincidan. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| toggle(switch) | Alterna la visibilidad de todos los elementos que coincidan basados en el switch (true - muestra todos |
| | los elementos, false - esconde todos los elementos) |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| jQuery.fx.off | Desabilita globalmente todas las animaciones. |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
Traduccion por arthusu desde TutorialsPoint
No hay comentarios:
Publicar un comentario