عرض مصدر jQuery/animated selector

<noinclude>{{DISPLAYTITLE:المحدد <code>‎:animated‎</code>‎ في jQuery}}</noinclude>
== المحدد <code>‎:animated‎</code> ==

===الوصف===
يُستخدَم المُحدِّد ‎<code>:animated‎</code> في تحديد جميع العناصر قيد التحريك حاليًّا في وقت تشغيل المُحدِّد.

=== <code>‎jQuery( ":animated" )‎</code> ===
أضيفت في الإصدار: 1.2.

'''ملاحظة:''' إن استخدمنا نسخة jQuery مُخصَّصة لا تحتوي على وحدة التأثيرات، فسيرمي المُحدِّد <code>‎:animated</code>‎ خطأً.

=== ملاحظات إضافيّة ===
لمّا كان المُحدِّد <code>‎:animated</code>‎ عبارة عن امتداد jQuery وليس جزءًا من  مواصفات CSS، فلن تستفيد الاستعلامات التي تستخدم هذا المُحدِّد من تحسين الأداء المُقدَّم عن طريق تابع DOM الأصلي ‎<code>[[JavaScript/Document/querySelectorAll|querySelectorAll()‎]]</code>. ولتحقيق أفضل أداء عند استخدام <code>‎:animated</code> لتحديد العناصر، فحدِّد أولًا العناصر باستخدام مُحدِّد CSS ثمّ استخدم التّابع <code>‎[[jQuery/filter|.filter(":animated")‎]]</code>.

=== أمثلة ===
تغيير لون أي عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> قيد التحريك:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>مثال عن التحريك</title>
  <style>
  div {
    background: yellow;
    border: 1px solid #AAA;
    width: 80px;
    height: 80px;
    margin: 0 5px;
    float: left;
  }
  div.colored {
    background: green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="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>
</syntaxhighlight>

==مصادر==
*[http://api.jquery.com/animated-selector/ صفحة المحدد ‎:animated‎ في توثيق jQuery الرسمي].
[[تصنيف:jQuery]]
[[تصنيف:jQuery Selectors]]
[[تصنيف:jQuery Filter]]