Animation jQuery pour une boite de login

Savoir où l'on veut aller, c'est très bien. Mais il faut encore montrer qu'on y va. Emile Zola

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.

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.