La fonction animate() offerte par jQuery permet d’ajouter un effet à un élément de la page en quelques lignes de codes JavaScript. En voici un exemple.
Une boite de connexion qui dit non
Lorsque vous entrez un mot de passe erroné dans une boite de connexion (login), le CMS WordPress secoue la boite de gauche à droite en guise de mécontentement. C’est également le cas sur certains environnement, un peu en mémoire au système NeXT peut-être ?
Voici un bout de code en guise d’illustration de la fonction anime() proposée par jQuery.
La fonction jQuery.animate()
.animate( properties [, duration] [, easing] [, complete] )
- properties : les propriétés à déclarer. C’est le seul paramètre obligatoire ;
- duration : la durée de l’animation ;
- easing : l’effet transitoire de l’animation. Par défaut, swing est utilisé. Et si vous désirez en ajouter, il faut installer un plugin tel que jQuery UI suite ;
- complete : fonction utilisée en fin d’animation. Elle peut servir, par exemple, pour enchainer une animation. C’est d’ailleurs ce qui est illustré ici.
$('#clickme').click(function() {
var m = $("#moveme");
var t = 32; // délais entre chaque mouvement
var d = 30; // déplacement
$(m).animate({ // 1, move right
opacity: 0.5, // properties
marginLeft: '+='+d
},
t, // duration
function() { // complete
$(m).animate({ // 2, move left
marginLeft: '-='+(d*2)
},
t*2,
function() {
$(m).animate({ // 3, move right
marginLeft: '+='+(d*2)
},
t*2,
function() {
$(m).animate({ //end
opacity: 1,
marginLeft: '-='+d
},
t);
}); // end 3
}); // end 2
}); // end 1
});Lorsque vous cliquez sur le bouton, la boite est déplacée 30 pixels sur la droite, puis 60 sur la gauche, puis 60 sur la droite, puis revient à sa position en se déplacant 30 pixels sur le gauche.
Ce qui donnera par exemple :
Voici le code complet de cet exemple jQuery.animate() pour les amateurs.
RSS 2.0
