UNIVERSIDAD DE LAS FUERZAS ARMADAS-ESPE SEDE SANTO

DOMINGO
DEPARTAMENTO DE CIENCIAS DE LA COMPUTACIÓN - DCCO-SS

CARRERA DE INGENIERÍA EN TECNOLOGÍAS DE LA INFORMACIÓN

PERIODO : Septiembre 2022

ASIGNATURA : Aplicaciones de Sistemas Web

TEMA : Laboratorio 2

NOMBRES : Mercy Arrobo

NIVEL-PARALELO : Quinto

DOCENTE : Ing. Luis Castillo. MSc.

FECHA DE ENTREGA : 13/01/2023

SANTO DOMINGO - ECUADOR

2023
 ÍNDICE DE CONTENIDO
1. Introducción ................................................................................................................... 3
2. Sistemas de Objetivos ..................................................................................................... 3
2.1. Objetivo General: .................................................................................................... 3
2.2. Objetivos Específicos: .............................................................................................. 3
3. Desarrollo....................................................................................................................... 3
3.1. Efectos y animaciones .............................................................................................. 3
3.2. Función animate ...................................................................................................... 6
3.3. Plugin de jQuery ..................................................................................................... 7
3.4. Sección de preguntas................................................................................................ 8
4. Conclusiones................................................................................................................. 10
5. Recomendaciones.......................................................................................................... 11
6. Bibliografía/ Referencias ............................................................................................... 11

ÍNDICE DE FIGURAS

Figura 1 Estructura HTML ................................................................................................................. 4

Figura 2 Función fadeToggle()............................................................................................................. 5
Figura 3 Efectos y animaciones............................................................................................................ 5
Figura 4 Función animate .................................................................................................................... 6
Figura 5 Ejecución de la función animate. ......................................................................................... 6
Figura 6 Plugin jQuery ......................................................................................................................... 7
Figura 7 ejecución del Plugin jQuery .................................................................................................. 8
Figura 8 Estructura del menú - HTML .............................................................................................. 8
Figura 9 Funciones de animaciones..................................................................................................... 9
Figura 10 Menú deslizante ................................................................................................................. 10
Figura 11 Animación del menú deslizante ........................................................................................ 10
1. Introducción

En esta actividad, se pondrá en práctica los efectos y animaciones de jQuery. De esta

manera ampliaremos los conocimientos sobre las funciones más utilizadas de esta
librería, y usaremos un plugin que nos permite aumentar las funcionalidades de la
librería. Como es caso de la función animate() de jQuery es una de las funciones más
versátiles y poderosas que proporciona la biblioteca. Esta función te permite crear
animaciones personalizadas mediante cambios en las propiedades CSS de un
elemento. Puedes especificar los cambios que deseas hacer en las propiedades CSS,
así como la velocidad y la función de easing (o suavizado) para controlar cómo se
realiza la animación (Héctor de León, 2014).

2. Sistemas de Objetivos

2.1. Objetivo General:

Realizar un informe de laboratorio en el que se evidencie las funciones que

nos permitan hacer efectos y animaciones en jQuery.

2.2. Objetivos Específicos:

2.2.1. Establecer la forma en que se manejan los efectos y animaciones en
jQuery.
2.2.2. Evidenciar el uso de esta librería, y sus plugins.

3. Desarrollo

3.1. Efectos y animaciones

Con jQuery, es posible crear efectos y animaciones atractivas e interactivas

utilizando una sintaxis sencilla y concisa. Algunos ejemplos de efectos y
animaciones comunes que se pueden crear con jQuery incluyen:

• Efecto de desvanecimiento: se puede utilizar el método fadeIn() o

fadeOut() para mostrar u ocultar elementos de manera suave.
• Efecto de desplazamiento: se puede utilizar el método slideUp() o
slideDown() para mostrar u ocultar elementos de manera suave.
 • Animación personalizada: se puede utilizar el método animate() para
crear animaciones personalizadas, donde se puede especificar los
cambios en las propiedades CSS que se deben aplicar en el elemento.
• Efecto de hover: se puede utilizar el método hover() para definir
acciones que se deben ejecutar cuando el usuario coloca el cursor sobre
un elemento.

Estas son solo algunas de las funciones que jQuery ofrece para crear efectos y
animaciones en una página web. Hay muchas otras funciones y métodos
disponibles, y se pueden combinar para crear efectos y animaciones aún más
sofisticadas.

De tal manera que se pone en práctica la teórica en este primeramente se crea

la estructura de un login donde se pide el usuario y su contraseña como se
observa en la Figura 1.

Figura 1 Estructura HTML

Luego tenemos nuestra función con jQuery la cuál hemos usado la función de
fadeToggle() como se puede observar en la Figura 2 con el cual se logra
ocultar y mostrar el login.
 Figura 2 Función fadeToggle()

A continuación, se presenta el uso de algunas de estas funciones. Como se

puede observar en la Figura 3 que al dar clic sobre el botón (Login) este
mostrara un pequeño formulario para registrar datos. A demás como se
visualiza un icono a lado de la palabra ‘Login’ la cual al darle clic va a
cambiar el icono.

Figura 3 Efectos y animaciones.

3.2. Función animate
La implementación de la Función Animate (animate ({})) permite que el CSS
cambie dentro de un tiempo determinado, se le añadió también la función
(delay(). fadeOut ()), tal y como se muestra en la Figura 4.

Figura 4 Función animate

Al ejecutar el HTML la imagen aparece en pequeño, y mediante una

animación al hacer clic en la imagen esta crece hasta su tamaño normal y
después de que crece aparece el nombre de esta, tal y como se muestra en la
Figura 5.

Figura 5 Ejecución de la función animate.

3.3. Plugin de jQuery

Para la creación de un menú desplegable se hace uso de la Función easing (o

suavizado) que se utiliza en animaciones con jQuery. Una función de easing
específica se utiliza para controlar la velocidad de una animación en diferentes
puntos de esta. La función easeInSine es una función de easing de entrada, lo
que significa que la animación se acelera gradualmente al principio y luego se
mantiene constante (Plugin Para Hacer Efectos JQuery Con Easing, 2011).

La función easeOutBounce proporciona una sensación de movimiento

dinámico y energía, es adecuado para animaciones que requieren un final
llamativo, como el cierre de una ventana emergente. La función easeInSine y
easeOutBounce utilizan como uno de los argumentos en métodos de
animación como. animate() de jQuery como se muestra en la Figura 6.

Figura 6 Plugin jQuery

Al ejecutar el HTML nos aparecerá un menú plegable con imágenes, que se

abre al pasar el botón por el elemento y contiene un efecto de rebote cuando
este se cierra.
 Figura 7 ejecución del Plugin jQuery

3.4. Sección de preguntas

Crear una página que tenga una lista de elementos y al pasar el cursor por cada
elemento de esa lista (5 elementos) vayan apareciendo las imágenes descritas
en cada elemento, con algún efecto o animación vista en el laboratorio.

En la Figura 8 se puede evidenciar la estructura del menú, en este caso es un

menú deslizante. Dónde se hace uso de etiquetas perteneciente a listas como
“ul” y ‘li’. También se agrega una etiqueta titulo y la etiqueta imagen.

Figura 8 Estructura del menú - HTML

La función utilizada para realizar lo establecido es la siguiente: (slideDown();
stop(); slideUp()), estas funciones permitirán que al pasar el cursos muestren
lo requerido, a su vez se añadieron varias listas desplegables y se les aplicó
estilos en CSS. A continuación, se detallan están tres funciones:

• slideDown() es una función que anima a un elemento a deslizarse hacia

abajo, revelándolo si antes estaba oculto.
• stop() es probablemente una función que detiene una animación o
acción en curso.
• slideUp() es probablemente una función que anima un elemento a
deslizarse hacia arriba, ocultándolo si antes estaba visible.

Además de animate() y las mencionadas existen otras funciones que permiten

hacer animaciones como:
• show() y hide() para mostrar u ocultar un elemento
• toggle() para alternar entre mostrar y ocultar un elemento
• fadeIn() y fadeOut() para hacer una animación de aparecer y
desaparecer con un efecto de transparencia.

Figura 9 Funciones de animaciones

 Como se puede observar en la Figura 10, al realizar la ejecución nos muestra
una lista con elementos, y si pasamos el cursor por encimas de estos elementos
nos mostrará una imagen referente a los elementos. En este caso al pasar el
mouse por encima del texto ‘Girasol Azul’ nos mostrara una imagen referente
al texto como se observa en la Figura 11.

Figura 10 Menú deslizante

Figura 11 Animación del menú deslizante

4. Conclusiones

• A partir de la práctica se comprendió es uso de easeInSine y easeOutBounce

que son funciones de easing (o suavizado) que se utilizan en animaciones con
jQuery. Sin embargo, estas funciones son parte de un plugin de easing
adicional llamado "jQuery Easing". Este plugin proporciona una variedad de
funciones de easing adicionales además de las funciones de easing incluidas
en la biblioteca base de jQuery.
 • Además, que jQuery tiene varias funciones para los efectos y animaciones
para mostrar, ocultar, aparecer, desvanecer y deslizar. Como lo son ‘show ()’,
‘hide()’, fadeToogle(), fadeIn(), fadeOut(), animate() que fueron los más
utilizados para la práctica. También que estas funciones tienen opciones que
permiten personalizar y controlar la velocidad y el comportamiento de las
animaciones.
• En la sección de preguntas se estableció un diseño en HTML, que permite
visualizar una lista de elementos con animaciones al momento de pasar el
ratón por encima.

5. Recomendaciones

Es importante mencionar que para aplicar las funciones de jQuery para los efectos y
animaciones se debe seleccionar el elemento o elementos sobre los cuales se desea
aplicar la animación mediante selectores de css.

Tener en cuenta que esta función de easing es un plugin de jQuery UI, así que si no se
lo tiene incluido se debe incluir la librería jQuery UI para poder usarla.

6. Bibliografía/ Referencias

Héctor de León. (2014, April 17). 9.- La función Animate – Curso Básico de #Jquery

#9. Hdeleon.net. https://hdeleon.net/9-la-funcion-animate-curso-basico-de-jquery-

9/#:~:text=La%20funci%C3%B3n%20animate%20%28%29%20de%20jquery%20no

s%20sirve,y%20en%20que%20tiempo%20se%20realizara%20el%20efecto.

Plugin para hacer efectos jQuery con Easing. (2011, August 10). Desarrolloweb.com;

Desarrollo Web. https://desarrolloweb.com/articulos/plugin-efectos-jquery-

easing.html