Objetos y Funciones Diferidas en jQuery

El efecto de desplazamiento vertical en jQuery

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>&nbsp;</div>
</body>
</html>

Ejecutar ejemplo

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

Deja una respuesta

Your email address will not be published.

Objetos y Funciones Diferidas en jQuery
Anterior post

Encontrar los hermanos de un elemento en el DOM

Objetos y Funciones Diferidas en jQuery
Siguiente post

Encontrar un elemento del DOM según un criterio en jQuery

Latest from Programación