jQuery 3.3

.fadeToggle()




jquery

.fadeToggle ([المدة] [، التخفيف] [، كاملة]) الإرجاع: jQuery

الوصف ؛: عرض أو إخفاء العناصر المتطابقة عن طريق تحريك عتامة.

  • الإصدار المضافة: 1.4.4 .fadeToggle ([المدة] [، التيسير] [، مكتمل])

    • المدة (الافتراضية: 400 )
      النوع: Number أو String
      سلسلة أو رقم يحددان مدة تشغيل الرسم المتحرك.
    • تخفيف (الافتراضي: swing )
      اكتب: String
      سلسلة تشير إلى وظيفة التخفيف التي سيتم استخدامها في عملية النقل.
    • اكتمال
      النوع: Function ()
      هي وظيفة يتم الاتصال بها بمجرد اكتمال الرسوم المتحركة ، ويُطلق عليها مرة واحدة لكل عنصر متطابق.
  • الإصدار المضافة: 1.4.4 .fadeToggle (خيارات)

    • خيارات
      اكتب: PlainObject
      خريطة للخيارات الإضافية لتمريرها إلى الطريقة.
      • المدة (الافتراضية: 400 )
        النوع: Number أو String
        سلسلة أو رقم يحددان مدة تشغيل الرسم المتحرك.
      • تخفيف (الافتراضي: swing )
        اكتب: String
        سلسلة تشير إلى وظيفة التخفيف التي سيتم استخدامها في عملية النقل.
      • قائمة الانتظار (الافتراضي: true )
        النوع: Boolean أو String
        A Boolean تشير إلى ما إذا كان لوضع الرسوم المتحركة في قائمة انتظار التأثيرات. إذا كانت غير صحيحة ، فسيبدأ الرسم المتحرك على الفور. بدءًا من jQuery 1.7 ، يمكن أيضًا أن يقبل خيار قائمة الانتظار سلسلة ، وفي هذه الحالة تتم إضافة الرسم المتحرك إلى قائمة الانتظار التي تمثلها تلك السلسلة. عند استخدام اسم قائمة انتظار مخصصة لا يبدأ الرسم المتحرك تلقائيًا ؛ يجب عليك الاتصال .dequeue("queuename") لبدء تشغيله.
      • specialEasing
        اكتب: PlainObject
        عنصر يحتوي على واحد أو أكثر من خصائص CSS المعرفة بواسطة وسيطة الخصائص ووظائف تسهيلاتها المقابلة. (النسخة المضافة: 1.4 )
      • خطوة
        النوع: Function ( Number الآن ، Tween توين)
        دالة يجب استدعاؤها لكل خاصية متحركة لكل عنصر متحرك. توفر هذه الوظيفة فرصة لتعديل الكائن Tween لتغيير قيمة الخاصية قبل تعيينها.
      • تقدم
        النوع: Function ( Promise الرسوم المتحركة ، تقدم Number ، Number متبقي)
        دالة يجب استدعاؤها بعد كل خطوة من الرسوم المتحركة ، مرة واحدة فقط لكل عنصر متحرك بغض النظر عن عدد الخصائص المتحركة. (النسخة المضافة: 1.8 )
      • اكتمال
        النوع: Function ()
        دالة تسمى بمجرد اكتمال الرسوم المتحركة على عنصر.
      • بداية
        النوع: Function ( Promise الرسوم المتحركة)
        دالة يتم الاتصال بها عندما يبدأ الرسم المتحرك على عنصر ما. (النسخة المضافة: 1.8 )
      • فعله
        النوع: Function ( Promise الرسوم المتحركة ، قفز BooleanToEnd)
        دالة يجب استدعائها عند اكتمال الرسوم المتحركة على عنصر (يتم حل كائن Promise). (النسخة المضافة: 1.8 )
      • فشل
        النوع: Function ( Promise الرسوم المتحركة ، قفز BooleanToEnd)
        دالة يتم استدعاؤها عندما يفشل إكمال الرسم المتحرك على عنصر (يتم رفض الكائن Promise الخاص به). (النسخة المضافة: 1.8 )
      • دائما
        النوع: Function ( Promise الرسوم المتحركة ، قفز BooleanToEnd)
        هي دالة يجب استدعاؤها عندما يكتمل الرسم المتحرك على عنصر أو يتوقف دون إتمامه (إما أن يكون كائن Promise قد تم حله أو رفضه). (النسخة المضافة: 1.8 )

يقوم أسلوب .fadeToggle() بتحريك عتامة العناصر المتطابقة. عند استدعاء عنصر مرئي ، يتم تعيين خاصية نمط display العنصر إلى none بمجرد بلوغ العتامة 0 ، وبالتالي لن يؤثر العنصر على تخطيط الصفحة.

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

تخفيف

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

وظيفة رد الاتصال

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

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

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

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

مثال:

تخفّض الفقرة الأولى أو تخرج منها ، لتكمل الرسوم المتحركة في غضون 600 جزء من الثانية ، وباستخدام تخفيف خطي. تخف القيمة الأخيرة للداخل أو خارجها لمدة 200 جزء من الثانية ، مع إدراج رسالة "منتهية" عند الانتهاء.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeToggle demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</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>

عرض: