Sélecteur animated

Le sélecteur :animated sélectionne les éléments qui sont actuellement impliqués dans une animation. Si vous utilisez une build jQuery personnalisée sans le module d'effets, alors l'utilisation de :animated provoquera une erreur. Étant donné que :animated n'appartient pas aux spécifications CSS, pour améliorer les performances dans les navigateurs modernes, il est préférable de d'abord filtrer les éléments en utilisant un sélecteur CSS pur, puis d'appliquer .filter(':animated').

Syntaxe

Voici comment nous sélectionnons les éléments impliqués dans une animation :

javascript$(':animated');

Exemple

Faisons en sorte que sur l'un des carrés une animation soit lancée à l'aide de la fonction animateIt. À chaque clic sur le bouton avec l'identifiant #change, la couleur du carré animé changera du vert au rouge et inversement - en supprimant et en ajoutant la classe colored avec la méthode toggleClass :

html<button id="change">change</button>

<div></div>
<div id="test"></div>

cssdiv {
  background: green;
  border: 1px solid #AAA;
  width: 80px;
  height: 80px;
  margin: 0 5px;
  float: left;
}
div.colored {
  background: red;
}

javascript$('#change').click(function() {
  $('div:animated').toggleClass('colored');
});

function animateIt() {
  $('#test').slideToggle('slow', animateIt);
}

animateIt();

Voir aussi