L’opacité d’un élément est définie avec la propriété CSS opacity.
Saisissez le code suivant dans Notepad++ et vérifiez qu’il fonctionne correctement :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Opacité d'un élément</title>
</head>
<body>
<script src="jquery.js"></script>
Appuyez sur les boutons pour modifier l'opacité de l'image<br>
<button id="semi">Opacité 50%</button>
<button id="plein">Opacité 100%</button><br><br>
<img src="chat.jpg" id="chat">
<script>
$(function() {
$('#semi').on('click',function(){
$('#chat').css('opacity','0.5');
});
$('#plein').on('click',function(){
$('#chat').css('opacity','1');
});
});
</script>
</body>
</html>
Voici ce que vous devez obtenir :
Le changement d’opacité peut se faire progressivement avec la fonction fadeTo() :
fadeTo(durée en ms, opacité en %)
Exercice
Modifiez le code précédent pour obtenir une modification progressive de l’opacité en 2000 ms.
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Opacité d'un élément</title>
</head>
<body>
<script src="jquery.js"></script>
Appuyez sur les boutons pour modifier l'opacité de l'image<br>
<button id="semi">Opacité 50%</button>
<button id="plein">Opacité 100%</button><br><br>
<img src="chat.jpg" id="chat">
<script>
$(function() {
$('#semi').on('click',function(){
$('#chat').fadeTo(2000,0.5);
});
$('#plein').on('click',function(){
$('#chat').fadeTo(2000,1);
});
});
</script>
</body>
</html>
