En este artículo, vamos a mostrar el efecto de rebote usando jQuery UI. Todo el contenido mostrará el efecto de rebote cuando se haga clic en el botón de acción, lo que en realidad activa el script de efecto de rebote.
Sintaxis:
$( ".selector" ).effect(
selectedEffect, options, time(in ms), callback
);
Parámetros:
- selectedEffect: seleccione cualquier efecto dado en jQuery UI.
- opciones: Agregado para ciertas funciones (opcional).
- tiempo: El tiempo para completar el efecto en microsegundos.
- devolución de llamada: agregado para ciertas funciones (opcional).
Valor devuelto: No devuelve ningún valor.
Se agregaron secuencias de comandos: descargue la biblioteca para incluir archivos precompilados relevantes o use las rutas para las secuencias de comandos proporcionadas a continuación.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo: En este ejemplo, vamos a mostrar el efecto de rebote usando jQuery UI. Activaremos el script usando un botón.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script>
$(function () {
function action(selectedEffect) {
$("#effect").effect(selectedEffect, 1200);
};
$("#button").on("click", function () {
action("bounce");
return false;
});
});
</script>
<style>
.animation {
width: 500px;
height: 500px;
position: absolute;
}
#button {
padding: .5em 1em;
text-decoration: none;
position: absolute;
}
#effect {
width: 250px;
height: 190px;
padding: 15px;
position: relative;
}
</style>
</head>
<body>
<h3>
Geeks for Geeks Bounce
Effect Using jQuery UI
</h3>
<div class="animation">
<div id="effect" class=
"ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"
style="margin: 0; padding: 0.4em;
height: 170px; text-align: center;
background-color: green;">
Geeks For Geeks
</h3>
</div>
</div>
<span style="margin-left: 6em;">
<button id="button" class=
"ui-state-default ui-corner-all"
style="margin-top: 18em;">
Action
</button>
</span>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Jitender_1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA