Dos funciones de jQuery que permiten modificar dinámicamente la altura de un elemento, aunque normalmente será una capa del tipo <div> … </div>, son slideDown ( ) y slideUp ( ). Estos dos métodos serán objeto de estudio en este artículo.
slideDown (velocidad, función a la que se llama)
Este método desplaza hacia abajo un elemento seleccionado.
Solo se modifica la altura. Los mágenes verticales, externos e internos también se pueden modificar y de esta forma se obtiene un efecto más fluido.
- Velocidad (opcional): admite ‘slow, ‘normal’ o ‘fast, pero también admite un número que representan los milisegundos que debe durar el efecto.
- Función a la que se llama (callback)(opcional): es la función que se tiene que ejecutar cuando termine el efecto.
El método slideDown ( ) devuelve un objeto jQuery
Ejemplos de uso
$('div').slideDown('fast') o, también, $(‘div’).slideDown(‘fast’, function(){alert («Fin»);});
slideUp (velocidad, función a la que se llama)
Igual que el anterior pero el desplazamiento es hacia arriba.
Ejemplos de uso
$('div').slideUp('fast') o, también, $('div').slideUp ('fast', function(){alert ("Fin");});
Igual que el método anterior devuelve un objeto jQuery.
Ejemplo 1: Desplazar una capa
código
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Desplazar una capa - Altruistas jQuery</title>
<script src="../js/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").on("click", function (){
if ($("div").is(":hidden")) {
$("div").slideDown("slow");
}else {
$("div").slideUp("slow");
}
});
});
</script>
<style>
div {
width: 94px;
height: 150px;
background: #9cf;
border: 1px solid black;
display: none;
}
</style>
</head>
<body>
<p>
<button>Hacer click aquí</button>
</p>
<div> </div>
</body>
</html>
Comentario al ejemplo
Para comprender este ejercicio es preciso conocer los métodos de jQuery 0n e is.
Ejemplo 2: menú desplegable vertical
código
<!DOCTYPE html>
<html lang="es">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Menú desplazable vertical - Altruitas jQuery</title>
<scriptsrc="../js/jquery.js"></script>
<script>
$(document).ready(function(){
$('div.capitulo').click(function(){
$('div.items').slideUp('normal');
$(this).next().slideDown('normal');
});
$("div.items").hide();
});
</script>
<style>
a {
text-decoration: none;
color:black;
}
.capitulo {
width: 100px;
background: #9cf;
border-bottom: 1pxsolidblack;
cursor: pointer;
text-align: center;
border: 1px solid black;
}
.items {
width: 100px;
text-align: center;
border: 1pxsolidblack;
display: none;
}
</style>
</head>
<body>
<div class="capitulo">Capítulo 1</div>
<div class="items">
<a href="">Punto 1</a><br>
<a href="">Punto 2</a><br>
<a href="">Punto 3</a>
</div>
<div class="capitulo">Capítulo 2</div>
<div class="items">
<a href="">Punto 1</a><br>
<a href="">Punto 2</a>
</div>
<div class="capitulo">Capítulo 3</div>
<div class="items">
<a href="">Punto 1</a><br>
<a href="">Punto 2</a><br>
<a href="">Punto 3</a><br>
<a href="">Punto 3</a>
</div>
<div class="capitulo">Capítulo 4</div>
<div class="items">
<a href="">Punto 1</a><br>
<a href="">Punto 2</a><br>
<a href="">Punto 3</a>
</div>
</body>
</html>
Ejecutar ejemplo
Comentario al ejemplo
