jQuery UI API - .hide()

Categoría

Efectos (Effects) | Núcleo de efectos (Effects Core) | Anulaciones de métodos (Method Overrides) | Métodos (Methods)

Uso

Descripción:Usa un efecto personalizado para ocultar los elementos coincidentes.

Valor de retorno:jQuery

.hide( effect [, options ] [, duration ] [, complete ] )

Parámetros Tipo Descripción Valor por defecto
effect String Una cadena que indica quéefecto.
options Object Configuración específica del efecto yeasing。
duration Number o String Una cadena o un número que especifica cuánto tiempo se ejecutará la animación. 400
complete Function() Una función a la que se llamará cuando se complete la animación.

.hide( options )

Parámetros Tipo Descripción
options Object Todas las configuraciones de la animación. La única propiedad requerida es `effect`.
  • effect
    Tipo: String
    Descripción: Una cadena que indica quéefecto.
  • easing(Valor por defecto:"swing"）
    Tipo: String
    Descripción: Una cadena que indica laeasingfunción.
  • duration(Valor por defecto:400）
    Tipo: Number o String
    Descripción: Una cadena o un número que especifica cuánto tiempo se ejecutará la animación.
  • complete
    Tipo: Function()
    Descripción: Una función a la que se llamará cuando se complete la animación.
  • queue(Valor por defecto:true）
    Tipo: Boolean o String
    Descripción: Un valor booleano que indica si la animación debe colocarse en la cola de efectos. Si es `false`, la animación comenzará de inmediato.Desde jQuery 1.7, la opción `queue` también acepta una cadena; en ese caso, la animación se añade a la cola representada por la cadena.

Este complemento extiende el.hide()método integrado de jQuery. Si jQuery UI no está cargado, llamar al.hide()método no fallará directamente, ya que el método existe en jQuery. Sin embargo, el comportamiento esperado no ocurrirá.

Ejemplo

Oculta un `div` usando el efecto de caída (Drop Effect).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.hide() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<button>隐藏 div</button>
<div></div>
 
<script>
$( "button" ).click(function() {
  $( "div" ).hide( "drop", { direction: "down" }, "slow" );
});
</script>
 
</body>
</html>

Otras extensiones