Les effets de l'animation en jQuery

1. Année Universitaire : 2022-2023
Framework coté client
jQuery/Ajax
Enseignante : Zayneb Waari
Atelier n°3 :
Les effets et les animations en jQuery
Objectifs :
-Effet de fondu et de slide
-Animations personnalisées
-Gestion avancée des animations
Effet de fondu et de slide
fadeIn(), fadeOut , fadeToggle & fadeTo()
Soit le code html suivant :
<h1 class="text"> Les effets </h1>
<button id="b1"> exécuter fadeOut sur le titre</button>
<button id="b2"> exécuter fadeIn sur le titre</button>
<button id="b3"> exécuter fadeToggle sur le titre</button>
<button id="b4"> exécuter fadeTo sur le titre</button-->
jQuery :
$("#b1").click(function(){
$("h1").fadeOut(2000);
});
$("#b2").click(function(){
$("h1").fadeIn(2000);
});
$("#b3").click(function(){
$("h1").fadeToggle(2000);
});
$("#b4").click(function(){
$("h1").fadeTo(2000,0.5);
});

2. Méthodes slideUp(),slideDown()& slideToggle
Html :
<button id="b1"> exécuter slideup sur le titre</button>
<button id="b2"> exécuter slidedown sur le titre</button>
<button id="b3"> exécuter slideToggle sur le titre</button>
jQuery
$("#b1").click(function(){
$("h1").slideUp();
});
$("#b2").click(function(){
$("h1").slideDown();
});
$("#b3").click(function(){
$("h1").slideToggle();
});
Code CSS :

3. #b1{
background-color: #008000;
border: none;
color: white;
padding: 10px;
margin: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
cursor: pointer;
}
#b2{
background-color: #758000;
border: none;
color: white;
padding: 10px;
margin: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
cursor: pointer;
}
#b3{
background-color: rgb(43, 189, 226);
border: none;
color: white;
padding: 10px;
margin: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
cursor: pointer;
}
#b4{
background-color: #fb5190;
border: none;
color: white;
padding: 10px;
margin: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
cursor: pointer;

4. }
h1{
height: 200px;
background-color: cornflowerblue;
border: 2px solid ;
color: white;
text-align: center ;
position: relative;
font-size: 50px;
}
Animations personnalisées
Animate()
Html :
<button id="b1"> rapetisser le bloc</button>
<button id="b2"> rapetisser le texte </button>
<button id="b3" class="left"> décaler le titre vers la droite </button>
<button id="b4">effets</button>
jQuery :
$("#b1").click(function(){
$("h1").animate({width:"-=50%"},5000);
});
$("#b2").click(function(){
$("h1").animate({fontSize:"20px"},5000);
});
$("#b3").click(function(){
$("h1").animate({left:"300px"},2000);
});
$("#b4").click(function (){
$("h1").animate({width:"-
=30%",fontSize:"30px",left:"300px"},1000).fadeTo(2000,0.5);
});

5. Gestion de la file d’attente ou queue en jQuery
Ajouter les boutons :
<button id="b5">animer le div</button>
<button id="b6">stopper l'animation</button>
<div></div>
CSS :
div{
background-color: orange;
border: 2px solid black;
position: relative;
width: 50px;
height: 50px;
}
.bleu{
background-color: blue;
}
jQuery :
$("#b5").click(function(){
$("div")
.animate({left:"+=200px"},1000)
.animate({top:"+=50px"},400)
.queue(function(){
$(this).toggleClass("bleu").dequeue();//toggleClass donne la
couleur bleue au div ,
//l'appel à dequeue nous permet de passer à l'animation suivante
})
.animate({left:"+=200px"},1000)
.animate({top:"+=50px"},400)
});
$("#b6").click(function(){
$("div").clearQueue();//supprimer toutes les animations restantes en
fil d’attente
});

6. Modifier le méthode clearQueue () par stop() (arrêter l’animation
en cours et passer à l’animation suivante )
puis par finish()(stopper l’animation en cours et supprimer les
animations qui sont dans la fil d’attente