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