Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/efectos»

De WikiEducator
Saltar a: navegación, buscar
(→‎Eventos del ratón)
 
(8 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
 
{{Usuario:ManuelRomero/JavaScript/jquery/nav}}
 
<br />
 
<br />
−
===Eventos===
+
__TOC__
−
*Ya sabemos lo que son los eventos (acciones que ocurren sobre los objetos)
+
*Los efectos son acciones que queremos realizar sobre un elemento seleccionado
−
*JQuery está preparado para interactuar con los eventos que ocurren sobre los objetos de nuestro dom
+
*La sintaxis sigue la básica de '''''jquery'''''
−
*Vamos a exponer los principales eventos agrupándolos según el objeto que los origina
+
<source lang=javascript>
−
#Eventos de Ratón
+
$(seleccion).accion()
−
#Eventos de Teclado
+
−
#Eventos de formulario
+
−
#Eventos de la ventana o documento
+
−
 
+
−
=== Como funcionan los eventos en jQuery ===
+
−
*Tomemos el siguiente Ejemplo
+
−
<source lang="javascript">
+
−
$("button").click(function(miEvento){
+
−
  miEvento.preventDefault();
+
−
  alert("Has hecho clic en esta ancla. Como he hecho preventDefault, no te llevaré al href");
+
−
});
+
 
</source>
 
</source>
−
*El evento se define sobre todos los objetos seleccionados mediante el selector jQuery
+
*Vamos a ver distintos tipos de efectos, las posibilidades son enormes
−
:En el caso anterior sobre todas las '''anclas''' '''''<a....>''''' del documento
+
===Mostrar/Ocultar===
−
 
+
<source lang=javascript>
−
*El tipo de evento lo definimos con la función '''''click''''' en este caso. Luego veremos una lista de eventos disponibles.
+
$(seleccion).hide(time, callback)
−
*El evento recibe una función anónima como parámetro donde indicamos todas las acciones que queremos que se ejecuten cuando ocurra el evento.
+
$(seleccion).show(time, callback)
−
*Esta función anónima puede recibir como parámetro el objeto evento que se ha generado cuando ha ocurrido el evento
+
−
[[Imagen:eventoJQuery.png]]
+
−
 
+
−
<div class="slide">
+
−
 
+
−
*La función manejadora del evento tiene a su vez un parámetro ''miEvento'' que nos permite utilizar las propiedades o métodos del evento en cuestión.
+
−
: En este caso utilizaremos el método ''preventDefault()'' 
+
−
 
+
−
 
+
−
</div>
+
−
==Lista de eventos==
+
−
===Eventos del ratón===
+
−
;click()
+
−
:Sirve para generar un evento cuando se produce un clic en un elemento de la página.
+
−
;dblclick()
+
−
:Para generar un evento cuando se produce un doble clic sobre un elemento.
+
−
:Se generarán también dos eventos click()
+
−
</div>
+
−
<div class="slide">
+
−
;mousedown()
+
−
:Para generar un evento cuando el usuario hace clic independientemente de si lo suelta o no.
+
−
:Sirve tanto para el botón derecho como el izquierdo del ratón.
+
−
:Útil para drag&drop
+
−
<source lang="javascript">
+
−
$("#p").mousedown(function (b) {
+
−
    alert(b.which);
+
−
    //b puede ser 1, 2 o 3 (botón izquierdo, central o derecho)
+
−
});
+
 
</source>
 
</source>
−
 
+
*Los parámetros time y callback son opcioneles
−
;mouseup()
+
−
:Para generar un evento cuando el usuario ha hecho clic y luego suelta un botón del ratón.
+
−
:El evento mouseup se produce sólo en el momento de soltar el botón.
+
−
;mousemove()
+
−
:Evento que se produce al mover el ratón sobre un elemento de la página.
+
−
<source lang="javascript">
+
−
$("#contendedor").mousemove(function (c) {
+
−
        $(this).html("El ratón se está moviendo. Las coordenadas son " + c.pageX + ", " + c.pageY);
+
−
    });
+
−
</source>
+
−
 
+
−
<div class="slide">
+
−
;mouseover() y mouseout()
+
−
:Sirve para lo mismo que los eventos mouseover y mouseout de Javascript. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que pueden producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido (por los elementos anidados).
+
−
;mouseenter() y mouseleave()
+
−
:Normalmente preferiremos estos eventos respecto a los originales de javascript ya que se ejecutarán sólo una vez.
+
−
 
+
−
</div>
+
−
<div class="slide">
+
−
 
+
−
;hover()
+
−
:Esta función en realidad sirve para manejar dos eventos, cuando el ratón entra y sale de encima de un elemento. Por tanto espera recibir dos funciones en vez de una que se envía a la mayoría de los eventos.
+
−
:A menudo utilizaremos este evento mejor en vez de mouseenter() y mouseleave().
+
−
<source lang="javascript">
+
−
.hover(function() {
+
−
    //Escribmos el código a ejecutar cuando el ratón se poner sobre el objeto
+
−
  }, function() {
+
−
    //Escribmos el código a ejecutar cuando el ratón sale del objeto});
+
−
//Ejemplo:
+
−
$("#p").hover(function () {
+
−
    $(this).css("background-color", "blue");
+
−
  }, function () {
+
−
    $(this).css("background-color", "white");
+
−
});
+
−
</source>
+
−
 
+
−
</div>
+
−
<div class="slide">
+
−
 
+
−
;toggle()
+
−
:Esta función va a permitir alternar comportamientos sobre los objetos
+
−
:Por defecto, sin parámetros nos va a permitir ocultar o mostrar elementos de nuestro dom (Si están visibles los oculta, si están ocultos los visualiza.
+
−
En este caso le podemos pasar parámetros para indicar por ejemplo la velocidad de visualización (slow, fast o milisegundos)
+
 
{{Actividad|
 
{{Actividad|
−
Title=Mostrando y ocultando con toggle
+
Title=Muestra u oculta una imagen
−
|
+
|<source lang=javascript>
−
*Haz un programa que tengamos tres botones para mostrar/ocultar una imagen
+
−
*Usamos la función toggle (Si usamos esta función ya no tenemos que usar el evento click)
+
−
<source lang=html5>
+
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html lang="en">
 
<html lang="en">
Línea 108: Línea 23:
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <title>Document</title>
 
     <title>Document</title>
−
     <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
    <script>
 +
     < script type = 'text/javascript'
 +
    src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" >
 +
    </script>
 
     <script type="text/javascript">
 
     <script type="text/javascript">
−
$(document).ready(function(){
+
    $(document).ready(activa);
−
                         
+
−
//Escribe aquí el código
+
  
 +
    function activa () {
 +
        $("#muestra").click(muestra);
 +
        $("#oculta").click(oculta);
 +
    }
  
−
 
+
    function muestra(){
−
        });
+
    $("img").show();
−
 
+
    }
−
</script>
+
    function oculta(){
−
 
+
    $("img").hide();
−
      
+
     }
 
     </script>
 
     </script>
 
</head>
 
</head>
  
 
<body>
 
<body>
−
     <p> Probando cosas</p>
+
     <h1>Mostrando u ocultando imágenes</p>
−
     <button id="rapido">Rápido</button>
+
     <button id="muestra">Muestra </button>
−
    <button id="lento">Lento</button>
+
     <button id="oculta">Oculta</button>
−
     <button id="5s">5 segundos</button>
+
 
     <br />
 
     <br />
 
     <img src="naturaleza.jpg" alt="">
 
     <img src="naturaleza.jpg" alt="">
Línea 135: Línea 55:
 
</source>
 
</source>
 
}}
 
}}
−
[[Usuario:ManuelRomero/JavaScript/jquery/solucion1 |<font size=5 color=red >Solución</font>]]
+
;parámetros opicones
−
 
+
:El primer parámetros especifica el tiempo en el cual ocurre la acción
−
:Sirve para indicar dos o más funciones para ejecutar cuando el usuario realiza cliks, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.
+
:Valores
−
<source lang="javascript">
+
#slow
−
$("#p").toggle(function () {
+
#fast
−
  $(this).css("background-color", "blue");
+
# un entero que especifica el tiempo en milisegundos
−
  }, function () {
+
:El segundo parámetro es una función que se ejecutará cuando haya terminado la acción
−
    $(this).css("background-color", "red");
+
{{Actividad|
−
  }, function () {
+
Modifica el ejercico anterior para que se realice en un tiempo y que luego se muestre un alert diciendo que la imagen se ha mostrado u ocultado}}
−
    $(this).css("background-color", "yellow");
+
===devaneciéndose o degradaciones : fade===
−
});
+
*Con la bibliteca JQuery se puede hacer que los elementos desaparezcan y aparezcan como desvaneciéndose o degradándose
 +
*Para este comentido tenemos 4 métodos según se exponen a continuación
 +
<source lang=javascript>
 +
fadeIn()
 +
fadeOut()
 +
fadeToggle()  
 +
fadeTo()  
 
</source>
 
</source>
−
</div>
+
;fadeIn()
−
<div class="slide">
+
*Hace que aparezca un elemento oculto con un cierto efecto
 +
<source lang = javascript>
 +
$(selector).fadeIn(speed,callback);
 +
</source>
 +
;fadeOut()
 +
*Tiene el efecto contrario (el de desaparecer desvaneciéndose) un elemento de html
 +
<source lang = javascript>
 +
$(selector).fadeOut(speed,callback);
 +
</source>
 +
{{Actividad|Dibuja tres elementos con un color de fondo y haz que aparezcan y desaparezcan con botones correspondientes usando las funciones de fada
 +
<source lang=html5>
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 +
<script>
 +
//Escribe aquí el código
 +
</script>
 +
</head>
 +
<body>
  
−
===Eventos relacionados con el teclado===
+
<p>Mostrando la función fadeOut() fadeIn() modifinando los parámetros.</p>
−
*Primero se ejecuta uno o varios eventos keydown(), en función de si se mantiene o no la tecla pulsada. Luego uno o varios eventos keypress() y luego un único evento keyup().
+
−
;keydown()
+
−
:Se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presión o se mantiene.
+
−
:Funciona con todas las teclas.
+
  
−
</div>
+
<button id=muestra>Muestra</button>
−
<div class="slide">
+
<button id=oculta>Oculta</button>
  
−
;keyup()
 
−
:Se ejecuta en el momento de liberar una tecla.
 
−
:Funciona con todas las teclas.
 
−
*keypress()
 
−
:Se ejecuta como respuesta a una pulsación e inmediata liberación de la tecla.
 
−
:No se dispara con las teclas ALT, MAYS, CTRL.
 
  
−
</div>
+
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
−
<div class="slide">
+
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
 +
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  
−
*Los navegadores almacenan de forma diferente las teclas pulsadas. La propiedad which del evento nos permitirá trabajar sin preocuparnos de ello.
+
</body>
−
*Ejemplo:
+
</source>
 +
}}
 +
;fadeToggle()
 +
*Esta función tiene la característica de si ir intercambiando fadeIn y fadeOut alternativamente (Si está oculto, lo muestra, si está mostrado lo oculta
 +
*En este caso el método no puede recibir funciones como el método '''''toggle()'''''
 +
<source lang=javascript>
 +
$(selector).fadeToggle(speed,callback);
 +
</source>
 +
{{Actividad
 +
|Modifica el ejemplo anterior para hacerlo usando un solo botón y gestionando las acciones con el método '''''fadeToggle()'''''}}
 +
;fadeTo()
 +
*Este método admite un parámetro de opacidad.
 +
*Este parámetro, que toma un valor entre 0 (totalmente transparente) y 1 (totalmente opaco), permite realizar un degradado parcial del elemento.
 +
*Si no queremos que presenten ningún retardo (primero parámetro), debemos de poner un 0
 +
*En este caso obligatoriamente hay que usar al menos dos parámetros
 +
<source lang=javascript>
 +
$(selector).fadeTo(velocidad,opacidad,funcion_callback);
 +
</source>
 +
====Modo presentación : slide====
 +
*Estos métodos permiten visualizar elementos (suelen ser imágenes) a modo de presentaciones
 +
*Tenemos tres métodos que podemos intuir su funcionamiento
 +
<source lang=javascript>
 +
$(selector).slideDown(speed,callback);
 +
$(selector).slideUp(speed,callback);
 +
$(selector).slideToggle(speed,callback);
 +
</source>
 +
{{Actividad|
 +
Title=probando las presentaciones
 +
|
 +
<source lang=javascript>
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 +
<script>
 +
$(document).ready(function(){
 +
    $("#cabecera").click(function(){
 +
    //Prueba aquí con las diferentes funciones de slide
 +
    });
 +
});
 +
</script>
 +
 +
<style>
 +
#panel, #cabecera {
 +
    padding: 5px;
 +
    text-align: center;
 +
    background-color: #e5eecc;
 +
    border: solid 1px #c3c3c3;
 +
}
  
−
<source lang="html4strict">
+
#panel {
 +
    padding: 50px;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 +
<div id="cabecera">Haz un click aquí</div>
 +
<div id="panel">Hello world!</div>
 +
 
 +
</body>
 +
</source>
 +
}}
 +
====animimaciones: animate y stop====
 +
*Con este método podemos crear animaciones personalizadas
 +
<source lang=javascript>
 +
$(selector).animate({params},velocidad,callback);
 +
</source>
 +
*El parámetro '''''params''''' sigue la sintasix de css para especificar el cambio
 +
*Lo que va a ocurrir con este método es que el elemento seleccionado va a pasar a tener la nueva descripción de css con la velocidad marcada con el parámetro '''''velocidad'''''
 +
*Vamos a hacer una serie de ejemplos para verlo
 +
*Hay que tener en cuenta que por ejemplo para cabiar la posicón de un elemnto en el css ésta no puede ser estática (static), sino que debe de ser  relative, fixed, o absolute
 +
{{Actividad
 +
|Title=Probando las animaciones
 +
|
 +
<source lang=html5>
 +
<!DOCTYPE html>
 
<html>
 
<html>
−
  <head>
+
<head>
−
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
−
    <script type="text/javascript">
+
<script>  
−
      $(document).ready(function () {
+
  //Aquí vamos a ir incluyendo para probar los ejemplos
−
$("#keypress").keyup(function (key) {
+
</script>  
−
  alert(key.which);
+
</head>
−
});
+
<body>
−
      });
+
 
−
    </script>
+
<button>Iniciar animación</button>
−
  </head>
+
 
−
  <body>
+
<p>Recuerda que para poder cambiar la posición de un elemnto, ésta no puede ser estática (static), sino que debe de ser  relative, fixed, o absolute</p>
−
    <p>Key Up Test: <input type="text" name="keypress" id="keypress" /></p>
+
 
−
  </body>
+
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
 +
 
 +
</body>
 
</html>
 
</html>
 
</source>
 
</source>
−
</div>
+
;Cambia la posición de un elemento
−
<div class="slide">
+
<source lang=javascript>
 +
$("button").click(function(){
 +
    $("div").animate({left: '250px'});
 +
});
 +
</source>
 +
;Cambia el tamaño de un elemento
 +
<source lang=javascript>
 +
$("button").click(function(){
 +
    $("div").animate({
 +
        left: '250px',
 +
        opacity: '0.5',
 +
        height: '150px',
 +
        width: '150px'
 +
    });
 +
});
 +
</source>
 +
;Cambia el tamaño del texto
 +
*Este caso insertamos un texto en el div
 +
<source lang=javascript>
 +
$("button").click(function(){
 +
    var div = $("div");
 +
    div.animate({left: '100px'}, "slow");
 +
    div.animate({fontSize: '3em'}, "slow");
 +
});
 +
</source>
 +
;Podemos encadenar animaciones para que se ejecute una detras de otra
 +
<source lang=javascript>
 +
$(document).ready(function(){
 +
    $("button").click(function(){
 +
        var div = $("div");
 +
        div.animate({height: '300px', opacity: '0.4'}, "slow");
 +
        div.animate({width: '300px', opacity: '0.8'}, "slow");
 +
        div.animate({height: '100px', opacity: '0.4'}, "slow");
 +
        div.animate({width: '100px', opacity: '0.8'}, "slow");
 +
    });
 +
});
 +
</source>
 +
 
 +
}}
 +
====Anidando acciones====
 +
====Concepto de funciones de callback====
 +
jQuery Callback
 +
jQuery Chaining
 +
 
 +
===

Última revisión de 00:49 7 abr 2016



  • Los efectos son acciones que queremos realizar sobre un elemento seleccionado
  • La sintaxis sigue la básica de jquery 
$(seleccion).accion()
  • Vamos a ver distintos tipos de efectos, las posibilidades son enormes

Mostrar/Ocultar

$(seleccion).hide(time, callback)
$(seleccion).show(time, callback)
  • Los parámetros time y callback son opcioneles


Icon activity.jpg

Muestra u oculta una imagen

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    < script type = 'text/javascript'
    src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" >
    </script>
    <script type="text/javascript">
    $(document).ready(activa);
 
    function activa () {
        $("#muestra").click(muestra);
        $("#oculta").click(oculta);
    }
 
    function muestra(){
    	$("img").show();
    }
    function oculta(){
    	$("img").hide();
    }
    </script>
</head>
 
<body>
    <h1>Mostrando u ocultando imágenes</p>
    <button id="muestra">Muestra </button>
    <button id="oculta">Oculta</button>
    <br />
    <img src="naturaleza.jpg" alt="">
</body>
</html>




parámetros opicones
El primer parámetros especifica el tiempo en el cual ocurre la acción
Valores
  1. slow
  2. fast
  3. un entero que especifica el tiempo en milisegundos
El segundo parámetro es una función que se ejecutará cuando haya terminado la acción


Icon activity.jpg

Actividad

Modifica el ejercico anterior para que se realice en un tiempo y que luego se muestre un alert diciendo que la imagen se ha mostrado u ocultado



devaneciéndose o degradaciones : fade

  • Con la bibliteca JQuery se puede hacer que los elementos desaparezcan y aparezcan como desvaneciéndose o degradándose
  • Para este comentido tenemos 4 métodos según se exponen a continuación 
 fadeIn()
 fadeOut()
 fadeToggle() 
 fadeTo()
fadeIn()
  • Hace que aparezca un elemento oculto con un cierto efecto 
$(selector).fadeIn(speed,callback);
fadeOut()
  • Tiene el efecto contrario (el de desaparecer desvaneciéndose) un elemento de html 
$(selector).fadeOut(speed,callback);


Icon activity.jpg

Actividad

Dibuja tres elementos con un color de fondo y haz que aparezcan y desaparezcan con botones correspondientes usando las funciones de fada 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
//Escribe aquí el código
</script>
</head>
<body>
 
<p>Mostrando la función  fadeOut() fadeIn() modifinando los parámetros.</p>
 
<button id=muestra>Muestra</button>
<button id=oculta>Oculta</button>
 
 
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
 
</body>




fadeToggle()
  • Esta función tiene la característica de si ir intercambiando fadeIn y fadeOut alternativamente (Si está oculto, lo muestra, si está mostrado lo oculta
  • En este caso el método no puede recibir funciones como el método toggle() 
$(selector).fadeToggle(speed,callback);


Icon activity.jpg

Actividad

Modifica el ejemplo anterior para hacerlo usando un solo botón y gestionando las acciones con el método fadeToggle()



fadeTo()
  • Este método admite un parámetro de opacidad.
  • Este parámetro, que toma un valor entre 0 (totalmente transparente) y 1 (totalmente opaco), permite realizar un degradado parcial del elemento.
  • Si no queremos que presenten ningún retardo (primero parámetro), debemos de poner un 0
  • En este caso obligatoriamente hay que usar al menos dos parámetros 
$(selector).fadeTo(velocidad,opacidad,funcion_callback);

Modo presentación : slide

  • Estos métodos permiten visualizar elementos (suelen ser imágenes) a modo de presentaciones
  • Tenemos tres métodos que podemos intuir su funcionamiento 
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);


Icon activity.jpg

probando las presentaciones

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#cabecera").click(function(){
     //Prueba aquí con las diferentes funciones de slide
    });
});
</script>
 
<style> 
#panel, #cabecera {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
 
#panel {
    padding: 50px;
}
</style>
</head>
<body>
 
<div id="cabecera">Haz un click aquí</div>
<div id="panel">Hello world!</div>
 
</body>




animimaciones: animate y stop

  • Con este método podemos crear animaciones personalizadas 
$(selector).animate({params},velocidad,callback);
  • El parámetro params sigue la sintasix de css para especificar el cambio
  • Lo que va a ocurrir con este método es que el elemento seleccionado va a pasar a tener la nueva descripción de css con la velocidad marcada con el parámetro velocidad
  • Vamos a hacer una serie de ejemplos para verlo
  • Hay que tener en cuenta que por ejemplo para cabiar la posicón de un elemnto en el css ésta no puede ser estática (static), sino que debe de ser relative, fixed, o absolute


Icon activity.jpg

Probando las animaciones

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script> 
  //Aquí vamos a ir incluyendo para probar los ejemplos
</script> 
</head>
<body>
 
<button>Iniciar animación</button>
 
<p>Recuerda que para poder cambiar la posición de un elemnto, ésta no puede ser estática (static), sino que debe de ser  relative, fixed, o absolute</p>
 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
 
</body>
</html>
Cambia la posición de un elemento 
$("button").click(function(){
    $("div").animate({left: '250px'});
});
Cambia el tamaño de un elemento 
$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});
Cambia el tamaño del texto
  • Este caso insertamos un texto en el div 
$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});
Podemos encadenar animaciones para que se ejecute una detras de otra 
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");
        div.animate({height: '300px', opacity: '0.4'}, "slow");
        div.animate({width: '300px', opacity: '0.8'}, "slow");
        div.animate({height: '100px', opacity: '0.4'}, "slow");
        div.animate({width: '100px', opacity: '0.8'}, "slow");
    });
});




Anidando acciones

Concepto de funciones de callback

jQuery Callback jQuery Chaining

=

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/efectos&oldid=19305»