En este artículo, vamos a mostrar el efecto de desvanecimiento usando jQueryUI, todo el contenido se desvanecerá cuando se haga clic en el botón de acción, lo que en realidad activa el script de efecto de desvanecimiento.
Sintaxis:
$( ".selector" ).effect(
selectedEffect, options, time(in ms), callback
);
Parámetros:
- selectedEffect: Efecto seleccionado dado en jQueryUI.
- 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 devuelve ningún valor.
Guiones añadidos:
Descargue la biblioteca para incluir archivos precompilados o use la ruta 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 desvanecimiento usando jQueryUI. 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("fade");
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 Fade
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