الفرق بين المراجعتين لصفحة: «jQuery/animated selector»
< jQuery
Kinan-mawed (نقاش | مساهمات) طلا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 11: | سطر 11: | ||
=== ملاحظات إضافيّة === | === ملاحظات إضافيّة === | ||
لمّا كان المُحدِّد <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>. | ||
=== أمثلة === | === أمثلة === | ||
المراجعة الحالية بتاريخ 05:36، 14 مايو 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>