API jQuery UI - .hide()

Catégorie

Effets | Cœur des effets | Redéfinitions de méthodes | Méthodes

Utilisation

Description :Utilisez un effet personnalisé pour masquer les éléments correspondants.

Retourne :jQuery

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

Parameters Type Description Default
effect String Une chaîne indiquant quel effet utiliser.
options Object Paramètres spécifiques à l'effet eteasing。
duration Nombre ou chaîne de caractères Une chaîne ou un nombre déterminant la durée d'exécution de l'animation. 400
complete Function() Une fonction à appeler une fois l'animation terminée.

.hide( options )

Parameters Type Description
options Object Tous les paramètres d'animation. La seule propriété requise est effect.
  • effect
    Type : String
    Description : une chaîne indiquant quel effet utiliser.
  • easing(Par défaut :"swing"）
    Type : String
    Description : une chaîne indiquant la fonction d'easing.
  • duration(Par défaut :400）
    Type : Number ou String
    Description : une chaîne ou un nombre déterminant la durée d'exécution de l'animation.
  • complete
    Type : Function()
    Description : une fonction à appeler une fois l'animation terminée.
  • queue(Par défaut :true）
    Type : Boolean ou String
    Description : un booléen indiquant s'il faut placer l'animation dans la file d'attente des effets. Si false, l'animation commencera immédiatement.À partir de jQuery 1.7, l'option queue accepte également une chaîne, auquel cas l'animation est ajoutée à la file d'attente représentée par cette chaîne.

Ce plugin étend la méthode intégrée.hide()de jQuery. Si jQuery UI n'est pas chargé, appeler la.hide()méthode n'échouera pas directement, car la méthode existe déjà dans jQuery. Cependant, le comportement attendu ne se produira pas.

Exemple

Utilisez l'effet Drop pour masquer une div.

<!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>

Autres extensions