En este artículo, vamos a mostrar el efecto de resaltar usando jQueryUI, todo el contenido se resaltará con una pequeña luz parpadeante cuando se haga clic en el botón de acción, lo que en realidad activa el script de efecto de resaltado.
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 devolverá nada.
Se agregaron secuencias de comandos: descargue la biblioteca para incluir archivos precompilados o use la ruta para la secuencia de comandos dada 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 un efecto de resaltado 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("highlight");
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 Highlight 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