jQuery UI framework proporciona el método effect() para administrar una variedad diferente de efectos visuales en los elementos seleccionados sin usar los métodos show() y hide(). Hay muchos tipos de efectos que se pasan como parámetro al método effect() .
Sintaxis:
$(selector).effect(effectType[, options ] [, duration ] [, complete ]);
Parámetros: este método acepta cuatro parámetros, como se mencionó anteriormente y se describe a continuación:
- effectType: El tipo de efecto que se elige para la transición visual del elemento seleccionado.
- opciones: Las opciones o configuraciones se utilizan para suavizar los efectos.
- duración: el tiempo o la duración en milisegundos utilizados para que se ejecute el efecto de animación. El valor predeterminado es 400ms.
- complete: esta es la función de devolución de llamada que se ejecuta cuando se completa el efecto visual.
Enlaces para jQuery UI:
<enlace
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”rel=”stylesheet”type=”text/css”/>
<script src =”https://code.jquery.com/jquery-1.10.2.js”></secuencia de comandos><script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
Hay una gran variedad de tipos de efectos que se pueden pasar al método de efectos() según los requisitos del proyecto. En el siguiente ejemplo, solo demostraremos algunos de ellos junto con las imágenes de salida.
Ejemplo 1: El siguiente ejemplo demuestra el método jQuery UI effect() con efecto de sacudida con configuraciones de opciones como tiempo y distancia .
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery UI effect method</title>
<link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
#divID {
width: 200px;
height: 150px;
text-align: center;
background: green;
border: 1px solid black;
}
.height {
height: 10px;
}
</style>
<script>
$(document).ready(function () {
$('#divID').click(function () {
$("#divID").effect("shake", {
times: 20,
distance: 180
}, 3000, function () {
$("#divID").css(
"background", "#ff0000");
});
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI effect method with shake option </b>
<div class="height"> </div>
<div id="divID">
<span>
Click this to see the Shake effect!
</span>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el método jQuery UI effect() con efecto de explosión con configuración de aceleración como «swing».
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery UI effect with explode </title>
<link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
#divID {
height: 200px;
width: 200px;
text-align: center;
background: green;
border: 1px solid black;
}
.height {
height: 10px;
}
</style>
<script>
$(document).ready(function () {
$('#divID').click(function () {
$("#divID").effect({
effect: "explode",
easing: "swing",
pieces: 12,
duration: 3000
});
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI effect method with explode option</b>
<div class="height"></div>
<div id="divID">
<span>
Click this to see the explode effect!
</span>
</div>
</body>
</html>
Producción:
Ejemplo 3: El siguiente ejemplo demuestra el método effect() con el tipo de efecto de rebote .
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery UI effect Method with bounce</title>
<link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src=
"http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
#divID {
height: 100px;
width: 200px;
background: green;
text-align: center;
border: 1px solid black;
}
.height {
height: 10px;
}
</style>
<script>
$(document).ready(function () {
$('#divID').click(function () {
$("#divID").effect("bounce", {
times: 20,
distance: 200
}, 3000, function () {
$(this).css("background", "#ff0000");
});
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>jQuery UI effect method with bounce </b>
<div class="height"> </div>
<div id="divID">
<span>
Click this to see bounce effect
</span>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA