Ejemplo de jquery .slideUp ()

.deslizar hacia arriba( [duration ] [, complete ] )Devoluciones: jQuery

Descripción: Oculte los elementos emparejados con un movimiento deslizante.

• versión agregada: 1.0.deslizar hacia arriba( [duration ] [, complete ] )

  • duración (defecto: 400) Tipo: Número o cadena Una cadena o número que determina cuánto tiempo se ejecutará la animación.
  • completo Tipo: Función () Una función para llamar una vez que se completa la animación, llamada una vez por elemento coincidente.

• versión agregada: 1.0.slideUp (opciones)

  • opciones Tipo: PlainObject Un mapa de opciones adicionales para pasar al método.
    • duración (defecto: 400) Tipo: Número o cadena Una cadena o número que determina cuánto tiempo se ejecutará la animación.
    • aliviar (defecto: swing) Tipo: Cadena Una cadena que indica qué función de aceleración utilizar para la transición.
    • cola (defecto: true) Tipo: Booleano o Cadena Un booleano que indica si colocar la animación en la cola de efectos. Si es falso, la animación comenzará inmediatamente. A partir de jQuery 1.7, la opción de cola también puede aceptar una cadena, en cuyo caso la animación se agrega a la cola representada por esa cadena. Cuando se utiliza un nombre de cola personalizado, la animación no se inicia automáticamente; debes llamar .dequeue("queuename") para empezar.
    • specialEasing Tipo: PlainObject Un objeto que contiene una o más de las propiedades CSS definidas por el argumento de propiedades y sus correspondientes funciones de aceleración. (versión agregada: 1.4)
    • paso Tipo: Función (Número ahora, Interpolación entre interpolación) Una función que se llamará para cada propiedad animada de cada elemento animado. Esta función brinda la oportunidad de modificar el objeto Tween para cambiar el valor de la propiedad antes de que se establezca.
    • Progreso Tipo: Función (Promesa de animación, Número de progreso, Número de ms restantes) Una función que se llamará después de cada paso de la animación, solo una vez por elemento animado, independientemente del número de propiedades animadas. (versión agregada: 1.8)
    • completo Tipo: Función () Una función que se llama una vez que se completa la animación de un elemento.
    • comienzo Tipo: Función (animación de promesa) Una función para llamar cuando comienza la animación de un elemento. (versión agregada: 1.8)
    • hecho Tipo: Función (animación de promesa, salto al final booleano) Una función que se llamará cuando se complete la animación de un elemento (se resuelva su objeto de promesa). (versión agregada: 1.8)
    • fallar Tipo: Función (animación de promesa, salto al final booleano) Una función que se llamará cuando la animación de un elemento no se complete (su objeto de promesa es rechazado). (versión agregada: 1.8)
    • siempre Tipo: Función (animación de promesa, booleano saltado al final) Una función que se llamará cuando la animación de un elemento se complete o se detenga sin completarse (su objeto de promesa se resuelve o rechaza). (versión agregada: 1.8)

• versión agregada: 1.4.3.deslizar hacia arriba( [duration ] [, easing ] [, complete ] )

  • duración (defecto: 400) Tipo: Número o cadena Una cadena o número que determina cuánto tiempo se ejecutará la animación.
  • aliviar (defecto: swing) Tipo: Cadena Una cadena que indica qué función de aceleración utilizar para la transición.
  • completo Tipo: Función () Una función para llamar una vez que se completa la animación, llamada una vez por elemento coincidente.

los .slideUp() El método anima la altura de los elementos coincidentes. Esto hace que las partes inferiores de la página se deslicen hacia arriba y parezcan ocultar los elementos. Una vez que la altura llega a 0 (o, si se establece, a lo que sea la propiedad de altura mínima de CSS), el display la propiedad de estilo se establece en none para asegurarse de que el elemento ya no afecte al diseño de la página.

Las duraciones se dan en milisegundos; los valores más altos indican animaciones más lentas, no más rápidas. Las cuerdas 'fast' y 'slow' se puede suministrar para indicar la duración de 200 y 600 milisegundos, respectivamente. Si se suministra cualquier otra cadena, o si el duration se omite el parámetro, la duración predeterminada de 400 se utiliza milisegundos.

Podemos animar cualquier elemento, como una simple imagen:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

Con el elemento mostrado inicialmente, podemos ocultarlo lentamente:

$( "#clickme" ).click(function() {
  $( "#book" ).slideUp( "slow", function() {
    // Animation complete.
  });
});

Facilitar

A partir de jQuery 1.4.3, se puede usar una cadena opcional que nombra una función de aceleración. Las funciones de aceleración especifican la velocidad a la que avanza la animación en diferentes puntos dentro de la animación. Las únicas implementaciones de facilitación en la biblioteca jQuery son las predeterminadas, llamadas swing, y uno que progresa a un ritmo constante, llamado linear. Más funciones de aceleración están disponibles con el uso de complementos, sobre todo el Suite jQuery UI.

Función de devolución de llamada

Si se proporciona, la devolución de llamada se activa una vez que se completa la animación. Esto puede resultar útil para unir diferentes animaciones en secuencia. La devolución de llamada no se envía ningún argumento, pero this se establece en el elemento DOM que se está animando. Si se animan varios elementos, es importante tener en cuenta que la devolución de llamada se ejecuta una vez por elemento coincidente, no una vez para la animación en su conjunto.

A partir de jQuery 1.6, los .promise() El método se puede utilizar junto con el deferred.done() método para ejecutar una única devolución de llamada para la animación en su conjunto cuando todos los elementos coincidentes han completado sus animaciones (consulte el ejemplo de .promise ()).

Notas adicionales:

• Todos los efectos de jQuery, incluidos .slideUp(), se puede desactivar globalmente configurando jQuery.fx.off = true, que efectivamente establece la duración en 0. Para obtener más información, consulte jQuery.fx.off.
• Si .slideDown() se llama en una lista desordenada (<ul>) y es <li> elementos tienen posición (relativa, absoluta o fija), el efecto puede no funcionar correctamente en IE6 a través de al menos IE9 a menos que el <ul> tiene “diseño”. Para solucionar el problema, agregue el position: relative; y zoom: 1; Declaraciones CSS al ul.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideUp demo</title>
  <style>
  div {
    background: #3d9a44;
    margin: 3px;
    width: 80px;
    height: 40px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
Click me!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( document.body ).click(function() {
  if ( $( "div" ).first().is( ":hidden" ) ) {
    $( "div" ).show( "slow" );
  } else {
    $( "div" ).slideUp();
  }
});
</script>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideUp demo</title>
  <style>
 div {
   margin: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div>
  <button>Hide One</button>
  <input type="text" value="One">
</div>
 
<div>
  <button>Hide Two</button>
  <input type="text" value="Two">
</div>
 
<div>
  <button>Hide Three</button>
  <input type="text" value="Three">
</div>
 
<div id="msg"></div>
 
<script>
$( "button" ).click(function() {
  $( this ).parent().slideUp( "slow", function() {
    $( "#msg" ).text( $( "button", this ).text() + " has completed." );
  });
});
</script>
 
</body>
</html>