En este artículo, vamos a mostrar el efecto de la escala usando jQuery UI, todo el contenido cambiará de tamaño cuando se haga clic en el botón de acción, lo que en realidad activa el script de efecto de escala.
Sintaxis:
$( ".selector" ).effect(
selectedEffect, options, time(in ms), callback
);
Parámetro:
- selectedEffect: Efecto seleccionado en jQuery UI.
- opciones: Agregado para ciertas funciones (opcional)
- tiempo: tiempo para completar el efecto en microsegundos.
- devolución de llamada: agregado para ciertas funciones (opcional)
Valor devuelto: No devolverá nada.
Scripts agregados: descargue la biblioteca para incluir archivos precompilados o use las rutas para el script dado 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 escala 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) {
var options = { percent: 75 };
$( "#effect" ).effect( selectedEffect, options, 1200);
};
$( "#button" ).on( "click", function() {
action("scale");
return false;
});
} );
</script>
<style>
.animation
{
width: 500px;
height: 500px;
position: absolute;
}
#button
{
padding: .5em 1em;
text-decoration: none;
position: absolute;
}
#effect
{
width: 250px;
height: 250px;
padding: 15px;
position: absolute;
}
</style>
</head>
<body>
<h3>Geeks for Geeks Scale 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