Tema 2:

Diseño de formularios
 DESARROLLO DE
APLICACIONES WEB

Tema 7:
JQuery – Efectos y Animaciones

Docente: Paul Delgado Soto

Logro de Aprendizaje N° 07:

Aplica efectos y animaciones para

mejorar la interacción con el
usuario, a través de la librería
jQuery perteneciente al lenguaje
de programación JavaScript.
Tema 7:
JQuery – Efectos y Animaciones

• Animar elementos
• Animación por propiedades CSS
• Redimensionamiento de elementos
• Diseño personalizado de animaciones
• Formulario y AJAX
Animar elementos
 jQuery - Animar elementos
Con jQuery, agregar efectos a una página es muy fácil.

Estos efectos poseen una configuración predeterminada

pero también es posible proveerles parámetros
personalizados.
 jQuery - Animar elementos
EFECTOS INCORPORADOS EN LA BIBLIOTECA
$.fn.show
Muestra el elemento seleccionado.

$.fn.hide
Oculta el elemento seleccionado.

$.fn.fadeIn
De forma animada, cambia la opacidad del elemento seleccionado al 100%.
 jQuery - Animar elementos
$.fn.fadeOut
De forma animada, cambia la opacidad del elemento seleccionado al 0
$.fn.slideDown
Muestra el elemento seleccionado con un movimiento de deslizamiento
vertical.
$.fn.slideUp
Oculta el elemento seleccionado con un movimiento de deslizamiento
vertical.
$.fn.slideToggle
Muestra o oculta el elemento seleccionado con un movimiento de
deslizamiento vertical, dependiendo si actualmente el elemento está
visible o no.
 jQuery - Animar elementos
CAMBIAR LA DURACIÓN DE LOS EFECTOS

Con la excepción de $.fn.show y $.fn.hide, todos los

métodos tienen una duración predeterminada de la
animación en 400ms. Este valor es posible cambiarlo.
 jQuery - Animar elementos
Método show ()

El método show () muestra los elementos seleccionados ocultos.

Nota: show () funciona en elementos ocultos con métodos

jQuery y display: none en CSS (pero no visibilidad: hidden).
 jQuery - Animar elementos
Método hide ()

El método hide () oculta los elementos seleccionados.

Sugerencia: Esto es similar a la visualización de propiedades
CSS: ninguna.

Nota : Los elementos ocultos no se mostrarán en absoluto (ya

no afecta el diseño de la página).
Ejemplos
Animación por propiedades CSS
 Animación por propiedades CSS

Con jQuery animate() podemos hacer efectos de

animación modificando las propiedades CSS de los
elementos del DOM de nuestra web.
 Animación por propiedades CSS
Propiedades CSS modificables por jQuery animate()
 Animación por propiedades CSS

Solo se puede aplicar jQuery animate() a elementos cuyos valores

son numéricos, tales como los mencionados anteriormente, por
ejemplo, la propiedad ‘background-color‘ NO sería accesible por
esta función.
 Animación por propiedades CSS

El Método animate() se utiliza para crear animaciones

personalizadas.

El parámetro params requerido define las propiedades CSS para ser

animados.

El parámetro de velocidad opcional especifica la duración del efecto.

Puede tomar los siguientes valores: "slow", "fast" , o milisegundos.

El parámetro callback opcional es una función a ejecutar después de la

animación completa.
 Animación por propiedades CSS

El siguiente ejemplo demuestra un uso sencillo del

método animate() ; se mueve un elemento <div> hacia
la derecha, hasta que se haya alcanzado una propiedad
izquierdo de 250 píxeles:

Ejemplo

$("button").click(function(){
$("div").animate({left: '250px'});
});
Ejemplos
Ejemplos

Uso de valores
predefinidos
Redimensionamiento de elementos
Ejemplos

manipular las Uso de valores

propiedades relativos
múltiples
Diseño personalizado de animaciones
Ejemplos
Formularios y AJAX
Ejemplos
Abrir XAMPP
Más Ejemplos
Gracias