API de jQuery UI - .toggle()

Catégorie

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

Utilisation

Description :Afficher ou masquer les éléments correspondants à l'aide d'effets personnalisés.

Retourne :jQuery

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

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

.toggle( 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 fonctioneasingà utiliser.
  • duration(par défaut :400）
    Type : Number ou String
    Description : Une chaîne ou un nombre qui spécifie 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 : Une valeur booléenne indiquant s'il faut placer l'animation dans la file d'attente des effets. Si false, l'animation commence 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 la chaîne.

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

Exemples

Basculer un div à l'aide de l'effet Fold.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.toggle() 演示</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" ).toggle( "fold", 1000 );
});
</script>
 
</body>
</html>

Autres extensions