Notes

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Animation jQuery d'éléments séparés ======

1er exemple :
<Code:js linenums>
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);
</Code>

2ème exemple :
<Code:js linenums>
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);}
    );
    
});
</Code>
Notes

Outils pour utilisateurs

Outils du site

Outils de la page
