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.

search |

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.

Sélectionner 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

Sélectionner 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

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

cryptocurrency Dogecoin DOGE

Tout savoir sur le dogecoin

fonction quotemeta, quotemeta

Protége les méta caractères

Objet string javascript

Objet string javascript : L'objet String (ou chaîne de caractères) est employé pour manoeuvrer un texte ou une partie d’un texte.



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci