Latest web development tutorials

effets jQuery - Animation

méthode jQuery animate () vous permet de créer des animations personnalisées.



jQuery

méthode animé () - jQuery animations

méthode jQuery animate () est utilisée pour créer une animation personnalisée.

Syntaxe:

$(selector).animate({params},speed,callback);

Le paramètre obligatoire de définir la formation des propriétés CSS animation.

Le paramètre de vitesse optionnel spécifie la durée de l'effet. Il peut prendre les valeurs suivantes: "lent", "rapide", ou en millisecondes.

Le paramètre de rappel optionnel est le nom de la fonction exécutée après l'achèvement.

L'exemple suivant illustre une méthode animée d'application simple (). Il élément <div> vers la droite pour déplacer 250 pixels:

Exemples

$("button").click(function(){
$("div").animate({left:'250px'});
});

Essayez »

lampe Par défaut, tous les éléments HTML ont une position statique et ne peuvent pas se déplacer.
Pour la position de fonctionnement, rappelez-vous le premier attribut de position élément de CSS réglé sur relatif, fixe ou absolue!

jQuery animate () - exploitation des propriétés multiples

S'il vous plaît noter que le processus de génération de l'animation peut utiliser plusieurs propriétés:

Exemples

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

Essayez »

lampeVous pouvez animer () pour faire fonctionner touslesattributs CSS?

Oui, presque! Cependant, la chose importante à retenir: Lorsque vous utilisez animé (), écrire tous les noms d'attributs doivent utiliser la notation Camel, par exemple, doit être utilisé au lieu de paddingLeft padding-left, au lieu d'utiliser marginRight margin-right, etc. .

Dans le même temps, l'animation de la couleur ne sont pas inclus dans le noyau bibliothèque jQuery.

Si vous avez besoin pour générer l' animation de couleur, vous devez jquery.com télécharger Couleur Animations plugin.


jQuery animate () - l'utilisation de la valeur relative

Vous pouvez également définir la valeur relative (dont la valeur est relative à la valeur courante de l'élément). Besoin de faire précéder la valeur avec le + = ou - =:

Exemples

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

Essayez »

() JQuery animé - utiliser la valeur prédéfinie

Vous pouvez même mettre la valeur de la propriété d'animation pour "show", "cacher" ou "toggle":

Exemples

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

Essayez »

jQuery animate () - Utilisation de la fonction de file d'attente

Par défaut, jQuery offre des capacités de file d'attente pour l'animation.

Cela signifie que si vous écrivez plus d'un après un autre appel animé (), jQuery va créer un appel de méthode de file d'attente de ces «interne». Puis, un par un pour exécuter ces appels animent.

exemple 1

$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

Essayez »

L'exemple suivant de l'élément <div> est déplacé vers la droite 100 pixels, puis augmenter la taille du texte:

exemple 2

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

Essayez »