Ejemplo de uso de métodos slidedown y slideup en jQuery

Aquí se resume y analiza el uso de los métodos slidedown y slideup en jQuery con ejemplos. Comparto con todos para que puedan referirse, como se detalla a continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown();1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp();1000);
      });
      //*****Ejemplo1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle();1000);
      //      });
      //*****Ejemplo2 Las funciones de animación pueden pasar funciones de retroalimentación, es decir, después de que la animación se complete se ejecutará esta función
      $("#btnToggle").click(function () {
        $("#message").slideToggle();1000, function () {
          alert('¡He terminado de ejecutarme!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="Expandir div" />
    <input id="btnslideUp" type="button" value="Replegar div" />
    <input id="btnToggle" type="button" value="Cambiar" />
  </div>
  <div id="message">
    Diferencias entre mouseover y mouseenter: div dentro de div. Ver nota. Tiene relación con la burbuja de eventos.<br /> 
    El evento mouseover se desencadena ya sea que el puntero del ratón pase sobre el elemento seleccionado o sus elementos hijos <br />
    El evento mouseenter se desencadena solo cuando el puntero del ratón pasa sobre el elemento seleccionado (no se desencadena al pasar sobre los elementos hijos)
  </div>
</body>
</html>

Los lectores interesados en más contenido relacionado con jQuery pueden ver la sección especial de este sitio: 'Resumen de técnicas de operaciones de ventana jQuery', 'Resumen de técnicas y trucos de efectos de arrastrar y soltar jQuery', 'Resumen de plugins y usos comunes jQuery', 'Resumen de usos de Ajax en jQuery', 'Resumen de técnicas de operaciones de tabla jQuery', 'Resumen de técnicas de extensión jQuery', 'Resumen de efectos clásicos comunes jQuery', 'Resumen de usos de animaciones y efectos jQuery' y 'Resumen de usos de selectores jQuery'.

Espero que lo descrito en este artículo pueda ayudar a todos a diseñar programas jQuery.

Declaración: el contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga espontáneamente por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @ para denunciar, y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)

Tutoriales básicos

Te gustará