La tarea aquí es crear un efecto de alternancia de deslizamiento hacia la izquierda y hacia la derecha en JQuery, puede usar el método jQuery animate().
Método .animate(): Se utiliza para cambiar la propiedad CSS para crear el efecto animado para el elemento seleccionado.
Sintaxis:
(selector).animate({styles}, para1, para2, para3);
Acercarse:
- El ancho real del cuadro se almacena en la variable cuyo valor de ancho se va a cambiar.
- El método .animate() toma el selector que se va a animar.
- La propiedad de estilo de ancho recibe los valores según el requisito.
- ancho: 0 – Para alternar a la izquierda.
- ancho: valor anterior almacenado – Para alternar a la derecha.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>How to create slide left and
right toggle effect using jQuery?</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
.box {
float: center;
overflow: hidden;
background: #32a852;
width: 400px;
padding: 0px;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner {
width: 400px;
padding: 0px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>jQuery | How to create slide
left and right toggle effect?</h3>
<hr>
<div class="box">
<div class="box-inner">
<h4>.animate() method is used</h4>
<p>GEEKSFORGEEKS - A computer
science portal for geeks.</p>
</div>
</div>
<hr>
<button type="button" class="slide-left">
Click to Slide-Left
</button>
<button type="button" class="slide-right">
Click to Slide-Right
</button>
<script type="text/javascript">
$(document).ready(function() {
var boxWidth = $(".box").width();
$(".slide-left").click(function() {
$(".box").animate({
width: 0
});
});
$(".slide-right").click(function() {
$(".box").animate({
width: boxWidth
});
});
});
</script>
</center>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón – “Hacer clic para deslizar hacia la izquierda”: 
Después de hacer clic en el botón – “Hacer clic para deslizar hacia la derecha”:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>How to create slide left and
right toggle effect using jQuery?</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
.box {
float: center;
overflow: hidden;
background: #32a852;
width: 400px;
padding: 0px;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner {
width: 400px;
padding: 0px;
border: 1px solid #000000;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>jQuery | How to create slide
left and right toggle effect?</h3>
<hr>
<div class="box">
<div class="box-inner">
<h4>.animate() method is used</h4>
<p>GEEKSFORGEEKS - A computer
science portal for geeks.</p>
</div>
</div>
<hr>
<input onclick="change()"
type="button"
class="slide-toggle"
value="Click to Slide-Left"
id="myButton1">
<script type="text/javascript">
$(document).ready(function() {
$(".slide-toggle").click(function() {
if (this.value == "Click to Slide-Left") this.value =
"Click to Slide-Right";
else this.value = "Click to Slide-Left";
$(".box").animate({
width: "toggle"
});
});
});
</script>
</center>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón – “Hacer clic para deslizar hacia la izquierda”: 
Después de hacer clic en el botón – “Hacer clic para deslizar hacia la derecha”:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA