Médiaforma

jQuery – Modification de l’opacité

Print Friendly

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>
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply