# :animated Selector

Categories: Selectors > Basic Filter | Selectors > jQuery Extensions

## animated selector

#### version added: 1.2jQuery(':animated')

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

### Additional Notes:

- 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")`.

### Example:

#### Change the color of any div that is animated.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
      div.colored { background:green; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>
      <button id="run">Run</button>

      <div></div>
      <div id="mover"></div>
      <div></div>
    <script>

        $("#run").click(function(){
          $("div:animated").toggleClass("colored");
        });
        function animateIt() {
          $("#mover").slideToggle("slow", animateIt);
        }
        animateIt();
    </script>

    </body>
    </html>

#### Demo: