Categorías: jQuery

Repaso a las funciones callback de jQuery

Vamos a ver qué son y para que valen las funciones callback de jQuery, se puede decir que son funciones que se ejecutan una vez terminado el efecto actual.

Estas funciones callback se usan en la mayoría de efectos de jQuery, os listo algunos de ellos:

Sintaxis típica de las funciones callback de jQuery

Veamos la sintaxis típica:

$(selector).efecto(speed, callback)

Tal y como podemos ver en el código superior la sintaxis es sencilla:

Siempre tenemos que tener un selector para controla el efecto sobre un elemento.
El efecto en cuestión…
Velocidad de la animación
Función callback a ejecutar cuando el efecto termina de ejecutarse.

Ejemplos de las funciones callback de jQuery

Comencemos con un ejemplo del efecto slideUp y slideDown:

$(document).ready(function() {
 $("#down04").click(function(event) {
  $("#rectangulo").slideDown("fast", function() {
   alert ('Efecto slideDown con velocidad fast terminado!');
  });
 });
 $("#up04").click(function(event) {
  $("#rectangulo").slideUp("slow", function() {
   alert ('Efecto slideUp con velocidad slow terminado!');
  });
 });
 $("#toggle03").click(function(event) {
  $("#rectangulo").slideToggle("slow", function() {
   alert ('Efecto slideToggle con velocidad slow terminado!');
  });
 });
});

Otro ejemplo de la función animate():

$(document).ready(function(){
 $("#boton2").click(function(){
     $("body").animate({backgroundPositionY:"300px"},5000,function() {alert ('Efecto terminado!');});
    });
});

Nuevo ejemplo de la función on():

$(document).ready(function(){
 $("#elementocontrolado").on({
  change:function(){alert('El input ha cambiado de valor');},
  click:function(){alert('Has hecho click en el input');}
 });
});

Ejemplo de callback con las funciones fadeIn y fadeOut:

$(document).ready(function() {
 $("#mostrar3").click(function(event) {
  $("#rectangulo").fadeIn(4000, function() {
   alert ('Efecto fadeIn terminado!');
   });
 });
 $("#ocultar3").click(function(event) {
  $("#rectangulo").fadeOut(4000, function() {
   alert ('Efecto fadeOut terminado!');
   });
 });
});