La méthode animate() de jQuery

1. La première prend quatre arguments: propriétés et valeurs de style, une vitesse facultative, Un type d’easing facultatif et Une fonction de rappel facultative
2. La seconde variante prend deux arguments : propriétés et options :

Pour le moment, nous utiliserons la première variante de la méthode animate(), mais nous passerons à la seconde dans autre tutoriel.

.animate({propriété1: 'valeur1', propriété2: 'valeur2'},
vitesse, easing, function() {
alert("L’animation est terminée.");
});

• La fonction prend quatre arguments:

1. Style

• Paramètre obligatoire
• Spécifie une ou plusieurs propriétés CSS et de valeurs vers lesquelles l’animation se dirigera.
• Les noms de propriétés doivent être sous forme camel-cased lorsqu’ils sont utilisés avec la méthode animate().
• Exemple:écrire paddingLeft au lieu de padding-left
• Propriétés peuvent être animées
• backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, opacity, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing, wordSpacing, lineHeight, textIndent.

2. vitesse (par défaut: 400 )

• Optionnel
• Une chaîne ou un nombre déterminant la durée d’exécution de l’animation.
• Pour les chaines sont slow(600ms), normal(400ms) et fast(200ms)

3. easing ou accélération(par défaut: swing )

• Optionnel
• Une chaîne indiquant quelle fonction d’accélération utiliser pour la transition.
• Spécifie la vitesse de l’élément à différents points de l’animation.
• Est un mot clé spécifiant si la vitesse de l’animation doit être cohérente (linear) ou commencer lentement et accélérer ( swing). S’il est omis, la valeur par défaut est swing.

4. function

• Optionnel
• Une fonction à appeler une fois l’animation terminée, appelée une fois par élément correspondant.

Agrandir Rétrécir

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js?ver=1.3.2"></script>
<script type = "text/javascript" language = "javascript">
         $(document).ready(function() {alert("fffff");
            $("#out").click(function(){
               $("#block").animate({ 
                  width: "80%",
                  height: "60px",
                  opacity: 0.8,
                  marginLeft: "0.2in",
                  fontSize: "3em", 
                  borderWidth: "10px"
               }, 2000 );
            });	
            $("#in").click(function(){
               $("#block").animate({ 
                  width: "100",
                  height: "20px",
                  opacity: 1.0,
                  marginLeft: "0in",
                  fontSize: "100%", 
                  borderWidth: "1px"
               }, 2000 );
            });		
         });
      </script>
<style>
.div {background-color:rgb(170, 204, 199); width:100px; border:1px solid rgb(5, 16, 175);}
</style>