1er exemple :
rects = $("svg rect");// Sélectionne tous les rectangles, les seuls objets à animer ici. $("svg rect").hide();// Cacher les éléments animés $(document).ready(function() { speed = 150;// Vitesse du fading function queue(start) { var rest = [].splice.call(arguments, 1), promise = $.Deferred(); if (start) { $.when(start()).then(function () { queue.apply(window, rest); }); } else { promise.resolve(); } return promise; } queue( function () { return rects.delay(500);}, function () { return rects.eq(5).fadeIn(speed);}, function () { return rects.eq(0).fadeIn(speed);}, function () { return rects.eq(6).fadeIn(speed);}, function () { return rects.eq(4).fadeIn(speed);}, function () { return rects.eq(7).fadeIn(speed);}, function () { return rects.eq(1).fadeIn(speed);}, function () { return rects.eq(3).fadeIn(speed);}, function () { return rects.eq(2).fadeIn(speed);} ); },false);
2ème exemple :
anim_1 = jQuery('header, body'); anim_2 = jQuery('#main'); anim_3 = jQuery ('#points > img, #point-bas'); anim_1.css("opacity", "0"); anim_2.css("opacity", "0"); anim_3.css("opacity", "0"); jQuery(document).ready(function($){ function queue(start) { var rest = [].splice.call(arguments, 1), promise = $.Deferred(); if (start) { $.when(start()).then(function () { queue.apply(window, rest); }); } else { promise.resolve(); } return promise; } queue( function () { return anim_1.animate({opacity: "1"}, 1200);}, function () { return anim_2.delay(100);}, function () { return anim_2.animate({opacity: "1"}, 900);}, function () { return anim_3.eq(0).animate({opacity: "1"}, 600);}, function () { return anim_3.eq(1).animate({opacity: "1"}, 600);}, function () { return anim_3.eq(2).animate({opacity: "1"}, 600);}, function () { return anim_3.eq(3).animate({opacity: "1"}, 600);} ); });