Animation jQuery pour une boite de login

© Christian PAULUS. Document créé le 20 janvier 2012 , mis à jour le 20 janvier 2012.

Si les faits ne correspondent pas à la théorie, changez les faits. Albert Einstein

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.

Documents joints

Plussoyez !

Les forums sont fermés.