:animated
JQ Home <<
Selectors <<
:animated
Positional match selector.
Shorthand version $(':animated')
Description
The :animated selector, selects all elements that are animating when the selector is run.
- Being a jQuery extension the
:animatedpseudo selector is not part of any current CSS specification. Therefore:animatedcannot take advantage of the performance boost provided by the native DOMquerySelectorAll()method. - If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the examples below to narrow the search and improve performance.
- Using a custom jQuery build without the effects module such as
jquery-3.5.1.slim.min.jswill cause the:animatedselector to throw an error.
Syntax
| Signature | Description |
|---|---|
jQuery(':animated') | Positional match |
Parameters
None.
Return
N/A.
:animated Example
Selectors << Top
Selects all elements that are animating when the selector is run.
In the example below we toggle an orange background to currently animating effects.
| Table Row 0, Table Data 1 | Table Row 0, Table Data 2 |
| Table Row 1, Table Data 1 | Table Row 1, Table Data 2 |
| Table Row 2, Table Data 1 | Table Row 2, Table Data 2 |
| Table Row 3, Table Data 1 | Table Row 3, Table Data 2 |
| Table Row 4, Table Data 1 | Table Row 4, Table Data 2 |
| Table Row 5, Table Data 1 | Table Row 5, Table Data 2 |
$(function(){
$('#btn1').on('click', function() {
$("td:animated").toggleClass("orange");
});
function toggleOrange() {
$(".animating").slideToggle("slow", toggleOrange);
}
toggleOrange();
});
Related Tutorials
jQuery Basic Tutorials - Lesson 4 - jQuery Selectors