Curso de jQuery
De WikiEducator
Saltar a: navegación, buscar
jQuery
Tutorial para desarrollar en Web mediante jQuery.
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
- 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);