La fonction polygones
L'élément animé est un sélecteur intégré à jQuery qui est utilisé pour sélectionner l'élément qui est actuellement animé. Le Sélecteur :animated sélectionne tous les éléments qui sont actuellement animés
jQuery nous permet de sélectionner l'élément qui est encours d'animation.
jQuery fournit un ensemble de méthodes (fonctions) pour animer un élément, par exemple .slideToggle(), .slideUp(), .slideDown(), .show() et .hide(). Et nous pouvons utiliser: le sélecteur animated pour choisir l'élément qui est animé avec ces méthodes.
Le 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 : 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