API jQuery UI - .effect()

Catégorie

Effets | Cœur des effets | Méthodes

Utilisation

Description :Appliquer un effet d'animation à un élément.

Retourne :jQuery

.effect( 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 spécifiant la durée d'exécution de l'animation. 400
complete Function() Une fonction à appeler une fois l'animation terminée.

.effect( 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 spécifiant 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 la chaîne.

.effect()La méthode applique une animation nommée à un élément. De nombreux effets prennent également en charge les modes show ou hide, qui peuvent être.show()、.hide()et.toggle()accomplis via la méthode.

Exemples

Appliquez un effet bounce à un div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.effect() 演示</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>
 
<p>点击任意地方应用特效。</p>
<div></div>
 
<script>
$( document ).click(function() {
  $( "div" ).effect( "bounce", "slow" );
});
</script>
 
</body>
</html>

Autres extensions