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()});
});

$(".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"

$(".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"