jQuery UI API - .show()

Categoría

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

Uso

Descripción:Muestra los elementos coincidentes mediante un efecto personalizado.

Devuelve:jQuery

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

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

.show( options )

Parámetros Tipo Descripción
options Object Todas las opciones de animación. La única propiedad obligatoria es effect.
  • effect
    Tipo: String
    Descripción: Una cadena que indica qué tipo deefecto.
  • easing(Valor predeterminado:"swing"）
    Tipo: String
    Descripción: Una cadena que indica laeasingfunción.
  • duration(Valor predeterminado:400）
    Tipo: Number o String
    Descripción: Una cadena o un número que especifica cuánto tiempo durará la animación.
  • complete
    Tipo: Function()
    Descripción: Una función que se llamará cuando se complete la animación.
  • queue(Valor predeterminado:true）
    Tipo: Boolean o String
    Descripción: Un valor booleano que indica si se debe colocar la animación en la cola de efectos. Si es false, la animación comenzará inmediatamente.A partir de jQuery 1.7, la opción queue también acepta una cadena; en ese caso, la animación se agrega a la cola representada por la cadena.

Este complemento extiende el.show()método integrado de jQuery. Si jQuery UI no está cargado, llamar al.show()método no fallará directamente, ya que el método existe en jQuery. Pero no se producirá el comportamiento esperado.

Ejemplo

Muestra un div usando el efecto plegado (Fold Effect).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.show() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    display: none;
    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" ).show( "fold", 1000 );
});
</script>
 
</body>
</html>

Otras extensiones