Efectos en jQuery

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);

• Para ver todas las opciones de efectos recomendamos ver la api de efectos de jquery

Callback functions