jQuery es un framework de JavaScript muy poderoso. Usando jQuery, podemos agregar efectos especiales a nuestro sitio web o aplicación basada en la web.
Podemos agregar varios efectos usando jQuery, como ocultar/mostrar, efectos de desvanecimiento, animación, devolución de llamada y muchos más.
Para ocultar/mostrar, alternar, efecto de desvanecimiento.
jQuery contiene la biblioteca de varias funciones que proporcionan técnicas para agregar animación a una página web. Estos incluyen animación simple, animaciones estándar.
En este artículo, vamos a aprender cómo agregar los efectos anteriores a nuestra página web.
Animación jQuery:
En jQuery, podemos producir varios tipos de animación usando el método animate(). Este método puede producir animaciones simples a complejas en la página web. Mediante la animación, podemos cambiar las propiedades de los elementos HTML, como el color de fondo, cambiar los estilos de borde, cambiar las propiedades de navegación, formatear las propiedades de la fuente, etc.
Aplicamos cambios a las propiedades proporcionando las reglas de estilo en el parámetro params del método.
Sintaxis:
$("selector").animate({params}, speed, callback);
dónde
- El parámetro params especifica la propiedad CSS que se cambiará durante la ejecución del método animate(). Es el parámetro requerido.
- El parámetro de velocidad especifica la velocidad a la que se aplica el efecto. Solo pueden aceptar estos valores: «lento», «rápido» o milisegundos.
- El parámetro de devolución de llamada especifica la función que se ejecutará después de la ejecución del método animate().
Veamos su implementación con código JavaScript:
En este código, animamos el rectángulo y cambiamos su forma a círculo.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/3.3.1/jquery.min.js">
</script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
<br/>
<button id="animate">Animate Me</button>
<script type="text/javascript">
$("#animate").click(function() {
$("div").animate({
width: "200px",
height: "200px",
borderRadius: "50%",
marginLeft: "210px",
marginTop: "70px",
},
2000,
);
});
</script>
</body>
</html>
Salida:
Antes de hacer clic en Anímame Después
de hacer clic en Anímame
Usando jQuery, podemos agregar el efecto de deslizamiento hacia arriba o hacia abajo en nuestra página web. Las diapositivas siempre están presentes en la página web en forma de pares div. Existen tres métodos para agregar los efectos deslizantes en nuestra página web. Estos son los siguientes:
- slideDown() : este método hace que el elemento se deslice hacia abajo.
Sintaxis:$(selector).slideDown(speed,callback);
Ejemplo: En este ejemplo, mostramos el efecto de deslizamiento hacia abajo. Si se hace clic en el panel Deslizar hacia abajo, se realiza el cambio correspondiente en el elemento HTML.
Código:<!DOCTYPE html><html><head>ajax/libs/jquery/3.3.1/jquery.min.js"></script><styletype="text/css">#p1, #f1 {padding: 5px;text-align: center;background-color: white;border: solid 2px green;}#p1 {padding: 50px;width:100px;display:none;color: green;font-style: italic;}#f1 {width:190px;}</style></head><body><h1align="center">Silde Down Example</h1><center><divid="f1">Slide down Effect</div><divid="p1">Welcome to GeeksForGeeks.</div></center><scripttype="text/javascript">$("#f1").click(function(){$("#p1").slideDown("slow");});</script></body></html>Salida:
Antes del efecto Down
Después del efecto Down
- slideUp(): este método hace que el elemento se deslice hacia arriba.
Sintaxis:$(selector).slideUp(speed,callback);
Ejemplo: en este ejemplo, mostramos el efecto de deslizamiento hacia arriba. Si se hace clic en el panel Deslizar hacia arriba, se realiza el cambio correspondiente en el elemento HTML.
Código:<!DOCTYPE html><html><head>libs/jquery/3.3.1/jquery.min.js"></script><styletype="text/css">#p2, #f2 {padding: 5px;text-align: center;background-color: white;border: solid 2px black;}#p2 {padding: 50px;width:100px;color: green;font-style: italic;}#f2 {width:190px;}</style></head><body><h1align="center">Slide Up Example</h1><center><divid="f2">Slide up Effect</div><divid="p2">Welcome to GeeksForGeeks.</div></center><scripttype="text/javascript">$("#f2").click(function(){$("#p2").slideUp("slow");});</script></body></html>Salida:
Antes del efecto Up
Después del efecto Up
- slideToggle() : este método hace que el elemento se deslice hacia arriba/abajo.
Si el elemento está en la posición de deslizamiento hacia arriba, hace que se deslice hacia abajo.
Si el elemento está en la posición de deslizamiento hacia abajo, hace que se deslice hacia arriba.
Sintaxis:$(selector).slideToggle(speed,callback);
dónde
- El parámetro de velocidad especifica la velocidad a la que se aplica el efecto. Solo pueden aceptar estos valores: «lento», «rápido» o milisegundos.
- El parámetro de devolución de llamada especifica la función que se ejecutará después de la ejecución de un método de deslizamiento en particular.
Ejemplo: en este ejemplo, mostramos el efecto de deslizamiento hacia arriba. Si se hace clic en el panel Deslizar hacia arriba, se realiza el cambio correspondiente en el elemento HTML.
Código:<!DOCTYPE html><html><head>ajax/libs/jquery/3.3.1/jquery.min.js"></script><styletype="text/css">#p3 ,#f3 {padding: 5px;text-align: center;background-color: white;border: solid 2px green;}#p3 {padding: 50px;width:100px;color: green;font-style: italic;}#f3 {width:190px;}</style></head><body><h1align="center">Slide Up/Down Example</h1><center><divid="f3">Slide up/down Effect</div><divid="p3">Welcome to GeeksForGeeks.</div></center><scripttype="text/javascript">$("#f3").click(function(){$("#p3").slideToggle("slow");});</script></body></html>Salida:
antes del efecto
Cuando se hace clic en la franja arriba/abajo por primera vez
Cuando se hace clic en la franja arriba/abajo por segunda vez
Publicación traducida automáticamente
Artículo escrito por AniketSingh1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA