Animation

Dans cette partie, nous verrons la méthode .animate() utilisée pour céer des animations personnalisées.

Méthode .animate()

API : http://api.jquery.com/animate/

$(selecteur).animate({paramètres},vitesse,callback);

Par exemple, déplaçons un élément class="pod" de 250px vers la droite.

$('#play').click(function(){
    $('.pod').animate({left: '250px'}, 500);
});

See the Pen .slideToggle() by Sutterlity (@sutterlity) on CodePen.

Les animations peuvent aussi être plus complexes.
Comme dans l'exemple ci-dessus, nous déplaçons class="pod" vers la droite et nous agrandissons sa largeur de 150px en même temps.

$('#play').click(function(){
    $('.pod').animate({
        left: '250px',
        width: '+=150px'
    }, 500);
});

See the Pen .animate() - 2 by Sutterlity (@sutterlity) on CodePen.

Nous pouvons aussi rajouter un callback.

$('#play').click(function(){
    $('.pod').animate({
        left: '250px',
        width: '+=150px'
    }, 500, function(){
        alert("L'animation est terminée");
    });
});

See the Pen .animate() - 3 by Sutterlity (@sutterlity) on CodePen.

Chaîner deux animations

Nous avons la possibilité avec la méthode .animate() de chaîner les animations, c'est-à-dire de lancer une animation puis une autre.

Continuons de complexifier l'exemple du dessus. À la fin de l'animation class="pod" prend une opacité de 25%.

$('#play').click(function(){
    $('.pod').animate({
        left: '250px',
        width: '+=150px'
    }, 500)
    .animate({
        opacity: '0.25'
    }, 1000);
});

See the Pen .animate() - 4 by Sutterlity (@sutterlity) on CodePen.

Nous pouvons aussi lancer les deux animations en même temps en fixant le paramètre queueà false. Cela aura pour effet de ne plus mettre l'animation ciblée à la queue.

$('#play').click(function(){
    $('.pod').animate({
        left: '250px',
        width: '+=150px'
    }, 500)
    .animate({
        opacity: '0.25',
    }, {
        'queue': false,
        'duration': 1000
    };
});

See the Pen .animate() - 5 by Sutterlity (@sutterlity) on CodePen.