الفرق بين المراجعتين ل"jQuery/animated selector"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:المحدد <code>‎:animated‎</code>‎ في jQuery}}</noinclude>')
 
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:المحدد <code>‎:animated‎</code>‎ في jQuery}}</noinclude>
 
<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>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]]

مراجعة 18:35، 12 مايو 2018


المحدد ‎:animated‎

الوصف

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

‎jQuery( ":animated" )‎

أضيفت في الإصدار: 1.2.

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

ملاحظات إضافيّة

لمّا كان المُحدِّد ‎:animated‎عبارة عن امتداد jQuery وليس جزءًا من تخصيص CSS، فلن تستفيد الاستعلامات التي تستخدم هذا المُحدِّد من تحسين الأداء المُقدَّم عن طريق تابع DOM الأصلي ‎querySelectorAll()‎. ولتحقيق أفضل أداء عند استخدام ‎:animated لتحديد العناصر، فحدِّد أولًا العناصر باستخدام مُحدِّد CSS ثمّ استخدم التّابع ‎.filter(":animated")‎.

أمثلة

تغيير لون أي عنصر <div> قيد التحريك:

<!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>

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=jQuery/animated_selector&oldid=8039"