OUJOOD.COM
Définition et Usage sélecteur :animated
jQuery cours tutorialLe Sélecteur :animated sélectionne tous les éléments qui sont actuellement animés.
Syntaxe
$(":animated")
Valeur de retour : Ce sélecteur renvoie l'élément qui est actuellement animé.
Exemple : L'exemple ci-dessous illustre le sélecteur animated de jQuery.
Exemple : 📝 Copier le code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo </title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div { background:yellow; border:1px solid #AAA; width:80px;
height:80px; margin:0 5px; float:left; }
div.colored { background:green; }
</style>
<script type="text/javascript">
$(document).ready(function(){ $("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();});
</script>
</head>
<body>
<button id="run">Cliquez pour voir</button>
<div>Ici un div non animé</div>
<div id="mover">Div animé</div>
<div>Un autre div non animé </div>
</body>
</html>
Exemple 2 la même animation que la précédente mais d’une autre manière
Exemple : 📝 Copier le code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo </title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
animDiv();
$(".bouton").click(function(){
$(":animated").css("background-color","#ff0000");
});
function animDiv(){
$("div:eq(0)").animate({width:"50%"},"slow");
$("div:eq(0)").animate({width:"100%"},"slow",animDiv);
}
});
</script>
</head>
<body>
<button class="bouton">Change la couleur de l'élément
animé</button>
<div style="background:#0000ff;">Div 1 animé</div>
<div style="background:#00ffff;">Div 2 non
animé</div>
<div style="background:#00ff00;">Div 3 non
animé</div>
</body>
</html>
Par gerywa 25 juillet 2014