الفرق بين المراجعتين لصفحة: «jQuery/fadeToggle»

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
لا ملخص تعديل
ط استبدال النص - 'jQuery/jQuery.fx.off' ب'jQuery/jQuery/fx/off'
 
(5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 3: سطر 3:


=== القيمة المعادة ===
=== القيمة المعادة ===
يُعيد كائنًا من النوع [https://wiki.hsoub.com/JQuery/jQuery/ jQuery].
يُعيد كائنًا من النوع [https://wiki.hsoub.com/jQuery/jQuery/ jQuery].
===الوصف ===
===الوصف ===
يعرض هذا التابع العناصر المطابقة أو يخفيها عن طريق تحريك درجة العتامة.
يعرض هذا التابع العناصر المطابقة أو يخفيها عن طريق تحريك درجة العتامة.
سطر 29: سطر 29:
سلسلة نصية من النوع [[JavaScript/String|String]]، تُشير إلى دالة التخفيف المستخدمة في عملية التحوّل.
سلسلة نصية من النوع [[JavaScript/String|String]]، تُشير إلى دالة التخفيف المستخدمة في عملية التحوّل.
=====<code>queue</code> (القيمة الافتراضية: <code>true</code>)=====
=====<code>queue</code> (القيمة الافتراضية: <code>true</code>)=====
قيمة منطقية [[JavaScriptBoolean|Boolean]] تُشير إلى ما إذا كان الحركة ستندرج في قائمة انتظار التأثيرات، وهي من النوع [[JavaScriptBoolean|Boolean]] أو [[JavaScript/String|String]]. إذا كانت قيمتها <code>false</code>، فستبدأ الحركة على الفور. كذلك يمكن، بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.7 1.7]، أن يقبل خيار <code>queue</code> سلسلة نصية، وفي هذه الحالة تضاف الحركة إلى طابور الانتظار الذي يمثله تلك السلسلة. عند استخدام اسم طابور انتظار مخصص لا تبدأ الحركة تلقائيًا؛ إذ يجب عليك استدعاء ‎<code>[[JQuery/dequeue|.dequeue("queuename")‎]]</code> لبدء تشغيله.
قيمة منطقية [[JavaScriptBoolean|Boolean]] تُشير إلى ما إذا كان الحركة ستندرج في قائمة انتظار التأثيرات، وهي من النوع [[JavaScriptBoolean|Boolean]] أو [[JavaScript/String|String]]. إذا كانت قيمتها <code>false</code>، فستبدأ الحركة على الفور. كذلك يمكن، بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.7 1.7]، أن يقبل خيار <code>queue</code> سلسلة نصية، وفي هذه الحالة تضاف الحركة إلى طابور الانتظار الذي يمثله تلك السلسلة. عند استخدام اسم طابور انتظار مخصص لا تبدأ الحركة تلقائيًا؛ إذ يجب عليك استدعاء ‎<code>[[jQuery/dequeue|.dequeue("queuename")‎]]</code> لبدء تشغيله.
=====<code>specialEasing</code>=====
=====<code>specialEasing</code>=====
وهو كائن من النوع [[JavaScript/Object|Object]]، يحتوي على واحد أو أكثر من خصائص CSS المعرفة بواسطة وسيط الخصائص ودوال التخفيف المقابلة. (أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4]).
وهو كائن من النوع [[JavaScript/Object|Object]]، يحتوي على واحد أو أكثر من خصائص CSS المعرفة بواسطة وسيط الخصائص ودوال الانتقال السلس المقابلة. (أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.4 1.4]).
=====<code>step</code>=====
=====<code>step</code>=====
دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Number|Number]] now, Tween tween )‎</code>، تُستدعى لكل خاصية تحريك لكل عنصر متحرك. توفر هذه الدالة فرصة لتعديل الكائن <code>Tween</code> لتغيير قيمة الخاصية قبل ضبطها.
دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Number|Number]] now, Tween tween )‎</code>، تُستدعى لكل خاصية تحريك لكل عنصر متحرك. توفر هذه الدالة فرصة لتعديل الكائن <code>Tween</code> لتغيير قيمة الخاصية قبل ضبطها.
سطر 55: سطر 55:
تنطلق دوال رد النداء، إذا توفرت، بمجرد اكتمال الحركة. ويمكن أن يكون هذا مفيدًا لإدراج حركات مختلفة معا في تسلسل. لا يُرسل لدوال رد النداء أي وسائط، ولكن يُضبط المعامل <code>[[JavaScript/this|this]]</code> إلى عنصر DOM الذي يجري تحريكه. في حالة تحريك عناصر متعددة، من المهم ملاحظة أن دالة رد نداء تُنفذ مرة واحدة لكل عنصر مُطابق، وليس مرة واحدة للحركة ككل.
تنطلق دوال رد النداء، إذا توفرت، بمجرد اكتمال الحركة. ويمكن أن يكون هذا مفيدًا لإدراج حركات مختلفة معا في تسلسل. لا يُرسل لدوال رد النداء أي وسائط، ولكن يُضبط المعامل <code>[[JavaScript/this|this]]</code> إلى عنصر DOM الذي يجري تحريكه. في حالة تحريك عناصر متعددة، من المهم ملاحظة أن دالة رد نداء تُنفذ مرة واحدة لكل عنصر مُطابق، وليس مرة واحدة للحركة ككل.


بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.6 1.6]، يمكن استخدام التابع <code>[[JQuery/promise|‎.promise()]]</code>‎ بالتزامن مع التابع [[JQuery/deferred/done|deferred.done()‎]] لتنفيذ دالة رد نداء واحدة للحركة ككل عند اكتمال حركة جميع العناصر المطابقة (راجع أمثلة التابع ‎<code>[[JQuery/promise|‎.promise()‎]]</code>).
بدءًا من الإصدار jQuery [http://api.jquery.com/category/version/1.6 1.6]، يمكن استخدام التابع <code>[[jQuery/promise|‎.promise()]]</code>‎ بالتزامن مع التابع [[jQuery/deferred/done|deferred.done()‎]] لتنفيذ دالة رد نداء واحدة للحركة ككل عند اكتمال حركة جميع العناصر المطابقة (راجع أمثلة التابع ‎<code>[[jQuery/promise|‎.promise()‎]]</code>).
===ملاحظات إضافية===
===ملاحظات إضافية===
يمكن إيقاف تشغيل كافة تأثيرات jQuery، بما في ذلك <code>‎.fadeToggle()</code>‎، بشكل عام عن طريق ضبط <code>jQuery.fx.off = true</code>، والذي يضبط فعليًا المدة إلى 0. لمزيد من المعلومات، راجع [[JQuery/jQuery.fx.off|jQuery.fx.off]] .
يمكن إيقاف تشغيل كافة تأثيرات jQuery، بما في ذلك <code>‎.fadeToggle()</code>‎، بشكل عام عن طريق ضبط <code>jQuery.fx.off = true</code>، والذي يضبط فعليًا المدة إلى 0. لمزيد من المعلومات، راجع [[jQuery/jQuery/fx/off|jQuery.fx.off]] .


=== أمثلة ===
=== أمثلة ===
سطر 65: سطر 65:
<head>
<head>
   <meta charset="utf-8">
   <meta charset="utf-8">
   <title>fadeToggle demo</title>
   <title>fadeToggle مثال عن التّابع</title>
   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
</head>
<body>
<body>
   
   
<button>fadeToggle p1</button>
<button>fadeToggle الفقرة1</button>
<button>fadeToggle p2</button>
<button>fadeToggle الفقرة2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>حركة هذه الفقرة بطيئة من النوع الخطي.</p>
<p>This paragraph has a fast animation.</p>
<p>حركة هذه الفقرة سريعة.</p>
<div id="log"></div>
<div id="log"></div>
   
   

المراجعة الحالية بتاريخ 11:01، 1 يوليو 2018

‎.fadeToggle( [duration ] [, easing ] [, complete ] )‎

القيمة المعادة

يُعيد كائنًا من النوع jQuery.

الوصف

يعرض هذا التابع العناصر المطابقة أو يخفيها عن طريق تحريك درجة العتامة.

‎.fadeToggle( [duration ] [, easing ] [, complete ] )‎

أُضيف مع الإصدار: 1.4.4.

duration (القيمة الافتراضية: 400)

مدة الحركة وهو من النوع عدد Number أو سلسلة نصية String.

easing (القيمة الافتراضية: swing)

سلسلة نصية من النوع String، تُشير إلى دالة التخفيف المستخدمة في عملية التحوّل.

complete

دالة على الشكل Function()‎، تُستدعى بمجرد اكتمال الحركة، وتُستدعى مرة واحدة لكل عنصر مطابق.

‎.fadeToggle( options )‎

أُضيف مع الإصدار: 1.4.4.

options

كائن من النوع Object، ويقدم مجموعة من الخيارات الإضافية لتمريرها إلى التابع.

duration (القيمة الافتراضية: 400)

مدة الحركة وهو من النوع عدد Number أو سلسلة نصية String.

easing (القيمة الافتراضية: swing)

سلسلة نصية من النوع String، تُشير إلى دالة التخفيف المستخدمة في عملية التحوّل.

queue (القيمة الافتراضية: true)

قيمة منطقية Boolean تُشير إلى ما إذا كان الحركة ستندرج في قائمة انتظار التأثيرات، وهي من النوع Boolean أو String. إذا كانت قيمتها false، فستبدأ الحركة على الفور. كذلك يمكن، بدءًا من الإصدار jQuery 1.7، أن يقبل خيار queue سلسلة نصية، وفي هذه الحالة تضاف الحركة إلى طابور الانتظار الذي يمثله تلك السلسلة. عند استخدام اسم طابور انتظار مخصص لا تبدأ الحركة تلقائيًا؛ إذ يجب عليك استدعاء ‎.dequeue("queuename")‎ لبدء تشغيله.

specialEasing

وهو كائن من النوع Object، يحتوي على واحد أو أكثر من خصائص CSS المعرفة بواسطة وسيط الخصائص ودوال الانتقال السلس المقابلة. (أُضيف مع الإصدار: 1.4).

step

دالة على الشكل Function( Number now, Tween tween )‎، تُستدعى لكل خاصية تحريك لكل عنصر متحرك. توفر هذه الدالة فرصة لتعديل الكائن Tween لتغيير قيمة الخاصية قبل ضبطها.

progress

دالة على الشكل Function( Promise animation, Number progress, Number remainingMs )‎، تُستدعى بعد كل خطوة من الحركات، مرة واحدة فقط لكل عنصر متحرك بغض النظر عن عدد الخصائص المتحركة. (أُضيفت مع الإصدار: 1.8 ).

complete

دالة على الشكل Function()‎، تُستدعى مرة واحدة عند اكتمال حركة العنصر.

start

دالة على الشكل Function( Promise animation )‎، تُستدعى عند بدء حركة عنصر ما. (أُضيفت مع الإصدار: 1.8 ).

done

دالة على الشكل Function( Promise animation, Boolean jumpedToEnd )‎، تُستدعى عند اكتمال حركة العنصر (قبول كائن Promise الخاص بها). (أُضيفت مع الإصدار: 1.8).

fail

دالة على الشكل Function( Promise animation, Boolean jumpedToEnd )، تُستدعى عند فشل إكمال حركة العنصر (رفض الكائن Promise الخاص بها). (أُضيفت مع الإصدار: 1.8).

always

دالة على الشكل Function( Promise animation, Boolean jumpedToEnd )، تُستدعى عند اكتمال حركة عنصر أو توقفها دون إتمامها (إما أن يكون كائن Promise قد قُبِل أو رُفِض). (أُضيف مع الإصدار: 1.8 ).

يُحرّك التابع ‎.fadeToggle عتامة العناصر المطابقة. عند استدعاء هذا التابع على عنصر مرئي، وبمجرد وصول العتامة إلى 0، تُضبط الخاصية display إلى none، بحيث لا يبقى تأثير للعنصر على تخطيط الصفحة.

تُعطى المدد بالمللي ثانية، وتشير القيم الأعلى إلى حركة أبطأ، وليس أسرع. يمكن إدخال السلاسل النصية 'fast' و 'slow' للإشارة إلى الفترات 200 و 600 ميللي ثانية، على التوالي.

دوال الانتقال السلس

بدءًا من الإصدار jQuery 1.4.3، يمكن استخدام سلسلة اختيارية تسمى دالة الحركة السلسة. تحدد دوال الحركة السلسة التي يتقدم بها التحريك في نقاط مختلفة داخل الحركة. تُعد تطبيقات التخفيف الوحيدة في مكتبة jQuery هي التطبيقات الافتراضية، وتُدعى swing، والتطبيق الذي يتقدم بوتيرة ثابتة ويُدعى linear. وتتوفر المزيد من دوال التخفيف مع استخدام المُلحقات، وعلى الأخص طاقم jQuery UI .

دوال رد النداء

تنطلق دوال رد النداء، إذا توفرت، بمجرد اكتمال الحركة. ويمكن أن يكون هذا مفيدًا لإدراج حركات مختلفة معا في تسلسل. لا يُرسل لدوال رد النداء أي وسائط، ولكن يُضبط المعامل this إلى عنصر DOM الذي يجري تحريكه. في حالة تحريك عناصر متعددة، من المهم ملاحظة أن دالة رد نداء تُنفذ مرة واحدة لكل عنصر مُطابق، وليس مرة واحدة للحركة ككل.

بدءًا من الإصدار jQuery 1.6، يمكن استخدام التابع ‎.promise()‎ بالتزامن مع التابع deferred.done()‎ لتنفيذ دالة رد نداء واحدة للحركة ككل عند اكتمال حركة جميع العناصر المطابقة (راجع أمثلة التابع ‎‎.promise()‎).

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

يمكن إيقاف تشغيل كافة تأثيرات jQuery، بما في ذلك ‎.fadeToggle()‎، بشكل عام عن طريق ضبط jQuery.fx.off = true، والذي يضبط فعليًا المدة إلى 0. لمزيد من المعلومات، راجع jQuery.fx.off .

أمثلة

إظهار الفقرة الأولى أو إخفاءها، مُكمِلًا الحركة خلال 600 ميللي ثانية، باستخدام الانتقال السلس الخطي linear. وإظهار الفقرة الأخيرة أو إخفاءها لمدة 200 ميللي ثانية، مع إدراج رسالة "finished" عند الانتهاء:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeToggle مثال عن التّابع</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>fadeToggle الفقرة1</button>
<button>fadeToggle الفقرة2</button>
<p>حركة هذه الفقرة بطيئة من النوع الخطي.</p>
<p>حركة هذه الفقرة سريعة.</p>
<div id="log"></div>
 
<script>
$( "button:first" ).click(function() {
  $( "p:first" ).fadeToggle( "slow", "linear" );
});
$( "button:last" ).click(function() {
  $( "p:last" ).fadeToggle( "fast", function() {
    $( "#log" ).append( "<div>finished</div>" );
  });
});
</script>
 
</body>
</html>

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=jQuery/fadeToggle&oldid=11631»