When you want to select all the animated elements on a single page, you have to use the jQuery :animated selector. It selects the current animation running elements to apply jQuery effects.
Let’s see the syntax to find out how to use the selector.
The above syntax selects all the currently animating elements. If you want to select all the animating elements for the specified tag name. jQuery :animated Selector comes with another syntax given below.
So, let’s start with a simple example contains three div elements. The first div element is animated and the other two remain without any animation.
The animation effect first increases the width, height, and margin. It then reverts back to its initial state condition again. You have to now apply the background property of CSS using jQuery to the animated element.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<script> $(document).ready(function(){ function myAnim(){ $("#para-animatemultiple").animate({ margin:'50px', width:'200px', height:'200px', opacity:0.6 }, 'slow'); $("#para-animatemultiple").animate({ margin:'0', width:'100px', height:'100px', opacity:0.6 }, 'slow', myAnim); }; myAnim(); $('.mybtn').click(function(){ $( ":animated" ).toggleClass( "mydivshow" ); }); }); </script> <style> .mydivshow{ background:yellow !important; } .mydiv{ width:100px; height:100px; background:#ccc; float:left; margin-right:10px; } </style> <button type="button" class="mybtn">Click Me</button> <p>When you click the above button, it selects only the animating element.</p> <div id="para-animatemultiple" class="mydiv"></div> <div class="mydiv"></div> <div class="mydiv"></div> |
Output
When you click the above button, it selects only the animating element.
Now, click the button given in the example above to select the animated element. It changes the color of the animated element on button click. You can apply many effects only to the animated element using this selector.
The above example selects all the elements of the page. But, if you want to select only the specified element on a given page, you have to use the second syntax given above.
|
1 |
$("div:animated") |
Let’s take an example to select only animation running with the div element. You have to use it as $(“div:animated”) with the jQuery effect to apply to the animated element.