JSB Library

o/opacity

Permet de modifier ou récupérer l'opacité d'une sélection d'éléments.

Utilisé sans paramètre, cette fonction permet de récupérer la valeur d'opacité du premier élément de la sélection en se basant sur la propriété CSS opacity définie soit par un attribut style soit par un instruction JSB ou JavaScript

Avec un paramètre, l'opacité des éléments sélectionnés est remplacée par la valeur donnée. Celle-ci doit être comprise entre 0 et 1, 0 étant la transparence totale et 1 l'opacité totale.

Par défaut, si la valeur dépasse 1, elle est considérée comme un pourcentage et donc divisée par 100. Ce comportement peut être modifié par l'option percent (voir exemples).

L'opacité est modifiée en utilisant plusieurs propriétés CSS afin d'être compatible avec un maximum de navigateurs (opacity, filter, -moz-opacity, -webkit-opacity, -imac-opacity, -khtml-opacity et -o-opacity).

o, opacity, trans et alpha sont des alias, ils peuvent donc être employés les uns pour les autres, ainsi les lignes ci-dessous ont le même effet :

$('#bloc').o(0.3);
$('#bloc').opacity(0.3);
$('#bloc').alpha(0.3);
$('#bloc').trans(0.3);

Les codes ci-dessous vont rendre la balise d'id "bloc" 30% opaque (c.à.d. 70% transparent).

Exemple d'utilisation en mode lecture :

var opacite=$('#bloc').o(); // opacite vaudra 0.3 si le bloc est 30% opaque

L'option $.options.percent peut prendre 3 valeurs : true, false ou 'auto', 'auto' est la valeur par défaut.

Si $.options.percent vaut auto, si la valeur passée en paramètre est strictement supérieure à 1, cette valeur est divisée par 100, sinon, elle est lue directement. Si $.options.percent vaut true, la valeur est toujours divisée par 100. Si $.options.percent vaut false et que la valeur passée est supérieure à 1, alors elle est remplacée par 1. Dans tous les cas, les valeurs inférieures à 0 sont remplacées par 0.

$.options.percent='auto';
$('.elements').o(0.4); // 40%
$('.elements').o(1); // 100%
$('.elements').o(2); // 2%
$('.elements').o(20); // 20%
$('.elements').o(100); // 100%
$('.elements').o(200); // 100%
$('.elements').o(0); // 0%
$('.elements').o(-5); // 0%

$.options.percent=true;
$('.elements').o(0.4); // 0.4%
$('.elements').o(1); // 1%
$('.elements').o(50); // 50%

$.options.percent=false;
$('.elements').o(0.4); // 40%
$('.elements').o(1); // 100%
$('.elements').o(50); // 100%