Download WordPress Themes, Happy Birthday Wishes

jQuery fadeToggle()

La méthode jQuery fadeToggle() permet de basculer entre les méthodes fadeIn() et fadeOut(). Si les éléments sont fondus, cela les fera disparaître et s’ils disparaissent, cela les fera disparaître.

Syntaxe:

$(selector).fadeToggle();  
$(selector).fadeToggle(speed,callback);   
$(selector).fadeToggle(speed, easing, callback);
  • speed: C’est un paramètre optionnel. Il spécifie la vitesse du délai. Ses valeurs possibles sont lentes, rapides et en millisecondes.
  • easing: spécifie la fonction d’accélération à utiliser pour la transition.
  • callback: c’est aussi un paramètre optionnel. Il spécifie la fonction à appeler après l’achèvement de l’effet fadeToggle ().

Prenons un exemple pour illustrer l’effet fadeToggle() de jQuery .

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").fadeToggle();  
        $("#div2").fadeToggle("slow");  
        $("#div3").fadeToggle(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>Voir l'exemple de méthode fadeToggle() avec différents paramètres.</p>  
<button>Cliquez</button><br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>   

Résultat :

jquery fadetoggle