oujood.com

jQuery  sélecteur :animated

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.

chercher |

Définition et Usage sélecteur :animated

jQuery cours tutorial

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 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



Voir aussi nos tutoriel :

border-bottom-style

Définit le style de la bordure inférieure

Détermine si une variable est de type chaîne de caractères">is_string

 Détermine si une variable est de type chaîne de caractères

fonction levenshtein, levenshtein

Calcule la distance Levenshtein entre deux chaînes