©
. Document créé le 20 janvier 2012 , mis à jour le 20 janvier 2012.Ce n'est pas le tout d'être une femme du monde. Encore faut-il savoir de quel monde il s'agit. Pierre Dac
Accueil du site > Astuces > Javascript > Animation jQuery pour une boite de login
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.
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.
.animate( properties [, duration] [, easing] [, complete] )
$('#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.
Les forums sont fermés.