Le framework jQuery propose un ensemble de fonctions qui vont vous permettre de réaliser des animations et effets dynamiques pour rendre vos pages web encore plus jolies et ergonomiques pour vos utilisateurs. Les fonctions proposées comprennent les animations classiques comme apparition/disparition, fondu, slide mais également des fonctions vous permettant de créer des animations plus complexes en fonction de votre imagination. Retrouvez les effets jQuery en action sur notre page de Demo jQuery Effets.
La fonction animate va vous permettre de définir une animation sur des objets jQuery. Elle permet notamment de modifier de manière dynamique les propriétés CSS de type numérique (ex: largeur, hauteur, transparence,...) alors que les propriétés "textuelles" comme la couleur de fond (background-color) ne sont pas gérées. C'est la fonction de base de toutes les animations en jQuery.
La syntaxe couramment utilisée est la suivante :
.animate( properties, [ duration ], [ easing ], [ complete] )
Un exemple pour comprendre comment passer la map de properties CSS à la fonction animate. A noter que les propriétés CSS passées en paramètre sont les propriétés cibles de l'animation. Cela veut dire que les propriétés CSS de l'objet vont évoluées progressivement (et simultanément si plusieurs propriétés sont passés en paramètres) vers les valeurs cibles. Si au contraire vous souhaitez que l'évolution de certaines propriétés se fassent à la suite et non pas simultanément alors il faut utiliser la fonction animate autant de fois que nécessaire.
var initCSS = {height: "60px", width: "100px", opacity:0.75, fontSize: "1em", padding: "5px"};
$("#animate-properties").css(initCSS).css({background: "#C1D4EA"});
$("#button-big").click(function(){
$("#animate-properties").animate({height:"120px", width:"200px", opacity:1}).animate({fontSize: "3em"}).html("big");
});
$("#button-small").click(function(){
$("#animate-properties").animate({height:"30px", width:"50px", opacity:0.5, fontSize: "0.8em"}).html("small");
});
$("#button-reset").click(function(){
$("#animate-properties").animate(initCSS).html("normal");
});
Un exemple pour comprendre comment utiliser le paramètre duration pour définir la vitesse/durée de votre animation. La duration s'exprime en millisecondes, plus la valeur est grande et plus l'animation dure longtemps (plus l'animation est lente). Au contraire plus la valeur de la duration est petite et plus l'animation sera rapide. Vous pouvez également utiliser les chaines de caractères "slow" et "fast" qui représente respectivement un duration de 600 et 200.
var initCSS = {height: "60px", width: "100px"}
$("#animate-duration").css(initCSS).css({background: "#C1D4EA", position:"absolute"});
$("#button-left").click(function(){
$("#animate-duration").animate({ left:"-=250px"}, 1500);
});
$("#button-right").click(function(){
$("#animate-duration").animate({ left:"+=250px"}, 'fast');
});
Un exemple pour comprendre comment utiliser le paramètre easing pour définir le comportement/progression de votre animation. Par défaut jQuery ne propose que les comportements swing(par défaut)(le mouvement pour aller de l'état initial à l'état final de votre animation sera rapide au début puis ralentira) et linear(le mouvement se fera de manière linéaire). Pour utiliser d'autres fonctions easing, il faut charger certains plugins comme le plugin easing ou encore jQuery User Interface.
var initCSS = {height: "60px", width: "100px"}
$(".animate-easing").css(initCSS).css({background: "#C1D4EA", position:"absolute"});
$("#animate-easing2").css({'margin-top':'80px'});
$(".button-left").click(function(){
$("#animate-easing1").animate({ left:"-=250px"}, 2000, 'easeOutBounce').html('easeOutBounce');
$("#animate-easing2").animate({ left:"-=250px"}, 2000, 'linear').html('linear');
});
$(".button-right").click(function(){
$("#animate-easing1").animate({ left:"+=250px"}, 2000, 'swing').html('swing');
$("#animate-easing2").animate({ left:"+=250px"}, 2000, 'linear').html('linear');
});
Un exemple pour comprendre comment utiliser le paramètre complete qui permet de définir un traitement qui sera exécuté une fois l'animation terminée. Très utile si vous souhaitez par exemple réaliser plusieurs animations qui se suivent mais sur des objets différents.
var initCSS = {height: "60px", width: "100px"}
$("#animate-complete1").css(initCSS).css({background: "#C1D4EA", position:"absolute"});
$("#animate-complete2").css(initCSS).css({background: "#DCDDD8", left:"150px", position:"absolute"});
$(".button-toogle1").click(function(){
$("#animate-complete1").animate({height: 'toggle'}, function(){alert("animation1 terminée")});
});
$(".button-toogle2").click(function(){
$("#animate-complete2").animate({height: 'toggle'}, 2500, 'easeOutBounce', function(){$(".button-toogle1").click()});
});
-
Les fonctions jQuery show et hide permettent respectivement d'afficher un élément caché et de cacher un élément visible.
La syntaxe utilisée est la suivante :
.show( [ duration ], [ easing ], [ complete] )
.hide( [ duration ], [ easing ], [ complete] )
$(".button-show").click(function(){
$(".demo-show-hide").show();
});
$(".button-hide").click(function(){
$(".demo-show-hide").hide().css({background: "#C1D4EA"});
});
$(".button-show-slow").click(function(){
$(".demo-show-hide").show(3000, function(){ $(this).css({background: "#DCDDD8"}); });
});
$(".button-hide-slow").click(function(){
$(".demo-show-hide").hide('fast').css({background: "#C1D4EA"});
});
5 objets dont 4 initialement cachés avec le style css "display:none"
Les fontions jQuery fadeIn et fadeOut permettent respectivement d'afficher ou de faire disparaître un objet avec un effet de type fondu. L'opacité (l'inverse de la transparence) de l'objet jQuery va varier de 1(visible) à 0(invisible/transparent) ou de 0 à 1. A noter que la fonction fadeIn est capable d'afficher des objets initialement cachés avec la propriétés css "display:none".
La syntaxe utilisée est la suivante :
.fadeIn( [ duration ], [ easing ], [ complete] )
.fadeOut( [ duration ], [ easing ], [ complete] )
$(".button-fadeIn").click(function(){
$(".demo-fade").fadeIn(3000, function(){ $(this).css({background: "#DCDDD8"}); });
});
$(".button-fadeOut").click(function(){
$(".demo-fade").fadeOut().css({background: "#C1D4EA"});
});
5 objets dont 4 initialement cachés avec le style css "display:none"
Un exemple pour monter comment nous aurions pu coder les fonctions fadeIn et fadeOut à partir de la fonction générale animate.
$(".button-fadeIn").click(function(){
$(".demo2-fade").css({opacity:0, display:"block"}).animate({opacity:1},3000, function(){ $(this).css({background: "#DCDDD8"}); });
});
$(".button-fadeOut").click(function(){
$(".demo2-fade").animate({opacity:0}).css({background: "#C1D4EA"});
});
5 objets dont 4 initialement cachés avec le style css "display:none"
Les fontions jQuery slideDown et slideUp permettent respectivement d'afficher ou de faire disparaître un objet avec un effet de type slide (glissement vertical). La hauteur (height) de l'objet jQuery va varier de 0(invisible) à sa taille normale et inversement. A noter que la fonction slideDown est capable d'afficher des objets initialement cachés avec la propriétés css "display:none". La fonction jQuery slideToggle permet d'afficher (slideDown) ou de faire disparaître (slideUp) un objet en fonction de son état initial (caché/visible).
La syntaxe utilisée est la suivante :
.slideDown( [ duration ], [ easing ], [ complete] )
.slideUp( [ duration ], [ easing ], [ complete] )
.slideToggle( [ duration ], [ easing ], [ callback ] )
$(".button-slideDown").click(function(){
$(".demo-slide").slideDown(3000, function(){ $(this).css({background: "#DCDDD8"}); });
});
$(".button-slideUp").click(function(){
$(".demo-slide").slideUp().css({background: "#C1D4EA"});
});
$(".button-slideToggle").click(function(){
$(".demo-slide").slideToggle("slow");
});
5 objets dont 4 initialement cachés avec le style css "display:none"
Un exemple pour monter comment nous aurions pu coder les fonctions fadeIn et fadeOut à partir de la fonction générale animate.
$(".button-slideDown").click(function(){
$(".demo2-slide").animate({height:"show"},3000, function(){ $(this).css({background: "#DCDDD8"}); });
});
$(".button-slideUp").click(function(){
$(".demo2-slide").animate({height:"hide"}).css({background: "#C1D4EA"});
});
5 objets dont 4 initialement cachés avec le style css "display:none"