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