entries/animated-selector.xml

<?xml version="1.0"?>
<entry type="selector" name="animated" return="">
  <title>:animated Selector</title>
  <sample>:animated</sample>
  <signature>
    <added>1.2</added>
  </signature>
  <desc>Select all elements that are in the progress of an animation at the time the selector is run.</desc>
  <longdesc>
    <p><strong>Note:</strong> If you use a custom jQuery build <em>without the effects module</em>, the <code>:animated</code> selector will throw an error. </p>
  </longdesc>
  <note id="jquery-selector-extension" type="additional" data-selector=":animated"/>
  <example>
    <desc>Change the color of any div that is animated.</desc>
    <code><![CDATA[
$( "#run" ).on( "click", function() {
  $( "div:animated" ).toggleClass( "colored" );
});

function animateIt() {
  $( "#mover" ).slideToggle( "slow", animateIt );
}

animateIt();
]]></code>
    <html><![CDATA[
<button id="run">Run</button>

<div></div>
<div id="mover"></div>
<div></div>
]]></html>
    <css><![CDATA[
  div {
    background: yellow;
    border: 1px solid #AAA;
    width: 80px;
    height: 80px;
    margin: 0 5px;
    float: left;
  }
  div.colored {
    background: green;
  }
]]></css>
  </example>
  <category slug="selectors/basic-filter-selectors"/>
  <category slug="selectors/jquery-selector-extensions"/>
  <category slug="version/1.2"/>
</entry>