Categories

:animated Selector

Categories: jQuery Extensions | Basic Filter

jQuery(':animated')

Description: Select all elements that are in the progress of an animation at the time the selector is run.

  • jQuery(':animated')

    version added: 1.0

Note:

Because :animated is a jQuery extension and not part of the CSS specification, queries using :animated cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :animated to select elements, first select the elements using a pure CSS selector, then use .filter(":animated").
  • Change the color of any div that is animated.

    HTML:
    <button id="run">Run</button>
    
      <div></div>
      <div id="mover"></div>
      <div></div>
    CSS:
    
      div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
      div.colored { background:green; }
      
    Code:
    
    
        $("#run").click(function(){
          $("div:animated").toggleClass("colored");
        });
        function animateIt() {
          $("#mover").slideToggle("slow", animateIt);
        }
        animateIt();