JSB Library

a/animate

Anime un élément de la page.

Exemple :
a et animate sont des alias. Ils peuvent être indifféremment employés l'un pour l'autre.

$('.objets').a('font-size:25px');

Premier div de class "objets"

Second div de class "objets"

Ce code va créer une transition de la valeur actuelle vers la valeur donnée. Si la taille de police a été définie précédemment par un attribut style, via JSB ou JavaScript à 9px par exemple, les balises de classe "objets" va augmenter progressivement (11px au bout de 50ms, 13 au bout de 100ms, 15 à 150... 23 à 350 et 25 à 400). La durée par défaut des animations est de 400ms et peut être modifiée via l'option duration.normal

Ci dessous un exemple d'animation avec initialisation et le code raccourci correspondant :

$('.objets').css('width:100px').a('width:250px');

Ici la longueur des éléments de classe "objets" est d'abord fixée à 100px (le changement est instantanné) puis la longueur va progressivement s'allonger jusqu'à 250px. Une syntaxe raccourcie est disponible :

$('.objets').a('width:100>250');

Ce code fonctionne de la même manière animant la longueur de 100 à 250px (lorsque l'unité n'est pas précisé, le pixel est utilisé.

Note si la longueur de départ n'est pas précisées, le script est capable de détecter la valeur actuelle pour les propriétés : top, bottom, left, right, width et height.

Il est possible de spécifier plusieurs propriétés à animer ensemble :

$('.objets').animate('font-size:25px; opacity:0.5');

Note : la propriété opacity gère la compatibilité et définira également des propriétés équivalentes telles que filter, -moz-opacity, -webkit-opacity assurant ainsi la compatibilité avec Internet Explorer, Firefox, Chrome, Safari et les autres navigateurs supportant l'une des propriétés.

Il est possible de spécifier en second paramètre la durée de l'animation en milliseconde ou une chaîne de caractère correspondant à un attribut d l'option duration. Par défaut ces chaînes sont "normal" (400ms), "slow" (800ms) et "fast" (200ms).

$('.objets').a('width:250','slow'); // Animation de 800ms
$('.objets').a('width:250',1000); // Animation de 1s
$.options.duration.slow=1200;
$('.objets').a('width:250','slow'); // Animation de 1200ms
$.options.duration.nouvelle_duree=100;
$('.objets').a('width:250','nouvelle_duree'); // Animation de 100ms

La durée doit être au minimum de 1ms, si la durée est inférieur, la valeur de duration.normal sera utilisée à la place.

Pour un changement instantané, utilisez .css().

Le troisième paramètre de cette fonction permet d'exécuter des actions à la fin de l'animation :

$('p').a('width:0',0,function () {
$(this).hide();
});

Note : le second paramètre est inférieur à 1, il est donc remplacé par "normal" soit 400ms si l'option n'a pas été modifiée.

Dans l'exemple ci-dessus. La longueur des balises va réduire jusqu'à 0 puis disparaissent (hide() modifie la propriété display à none.)

Enfin, un quatrième paramètre permet d'exécuter une action à chaque pas de l'animation permettant ainsi des animations complexes telle que de passer d'une couleur à une autre :

$('#bloc').a('width:200>400','slow',null,function (t) {
var rouge=Math.round(255*t);
var vert=Math.round(255*(1-t));
var bleu=vert;
$(this).css('background:rgb('+rouge+', '+vert+', '+bleu+')');
});

Sachant que t vaut 0 au début de l'animation et 1 à la fin, le background du bloc va passer progressivement de cyan à rouge :

Je suis #bloc

En revanche si vous ne comptez pas utiliser le premier paramètre et donc uniquement la fonction exécutée à chaque pas, servez-vous plutôt de af() qui est plus adaptée à ce cas précis.

Note : par défaut la vitesse d'animation est constante, mais il est possible de définir des courbes spécifique en passant un array en second paramètre. Cette array doit avoir deux entrées, la première est la durée, la seconde est une puissance. Si cette puissance vaut 1, la vitesse est constante, si elle est inférieure à 1, la vitesse est d'abord rapide puis lente. Si elle est supérieure à 1 d'abord lente puis rapide. Voyez le comparatif ci-dessous :

$('div°0').a('margin-left:0>500',['slow',0.25]);
$('div°1').a('margin-left:0>500',['slow','root']); // root vaut 0.5 par défaut
$('div°2').a('margin-left:0>500',['slow','normal']); // normal vaut 1 par défaut
$('div°3').a('margin-left:0>500',['slow','square']); // square vaut 2 par défaut
$('div°4').a('margin-left:0>500',['slow',4]);

Durée de l'animation : ms

$('input[type=button]').click(function ()
{
$('#bloc').a('background-color:'+this.value);
});

Voir aussi :
loop() pour répéter une animation en boucle.
round_trip() pour répéter alternativement deux animations aller et retour.