Curso de jQuery

De WikiEducator
Saltar a: navegación, buscar


Efectos

  • Utilizaremos las siguientes funciones:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
$(selector).toggle(speed,callback)
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeToggle(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
  • El primer parámetro nos indica la velocidad y puede tener los valores: slow, fast, normal o milisegundos.
  • El segundo parámetro es la función que hay que ejecutar en el momento en que se complete la acción de hide o show.
  • Los parámetros son opcionales
  • Con la función animate, podemos hacer efectos más complejos:
  • Con valores absolutos o relativos
  • Si ponemos varios animates seguidos, los irá encolando (no empezará una instrucción hasta terminar la anterior).
$(selector).animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
 
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
  • Pararemos una animación mediante la función stop:
$(selector).stop(stopAll,goToEnd);

Callback functions

  • En JavaScript se ejecutan las sentencias línea a línea. Puede ser que una sentencia no haya terminado su ejecución y ya haya comenzado la siguiente.
  • Ejemplo:
$("p").hide(1000);
alert("El párrafo se ha escondido ¿AHORA?");
  • Para evitar esto, pasamos la función como parámetro, y evitamos que se ejecute hasta que termina la animación. Esto se conoce como callback functions:
$("p").hide(1000,function(){
  alert("El párrafo se ha escondido AHORA");
});

Encadenar métodos

  • Si tenemos que ejecutar varios métodos o acciones sobre el mismo elemento, se pueden encadenar, de modo que el elemento se busque mediante el selector de jQuery una única vez.
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//también lo podríamos haber hecho así:
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);