الفرق بين المراجعتين لصفحة: «jQuery/animated selector»
< jQuery
Kinan-mawed (نقاش | مساهمات) أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:المحدد <code>:animated</code> في jQuery}}</noinclude>' |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 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>