En este artículo, vamos a mostrar el efecto de la diapositiva usando jQuery UI, todo el contenido aparecerá desde la izquierda cuando se haga clic en el botón de acción, lo que en realidad activa la secuencia de comandos del efecto de diapositiva.
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: Tiempo para completar el efecto en microsegundos.
- devolución de llamada: agregado para ciertas funciones (opcional).
Valor de retorno: No te devolverá nada.
Se agregaron secuencias de comandos: descargue la biblioteca 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 diapositiva 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">
<title>Geeks For Geeks</title>
<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("slide");
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 Slide 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