jQuery 3.3

.toggle()




jquery

.toggle ([المدة] [، complete]) الإرجاع: jQuery

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

  • الإصدار المضاف: 1.0 toggle ([المدة] [، مكتمل])

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

    • خيارات
      اكتب: 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 )
  • الإصدار المضاف: 1.4.3 .تبديل (المدة [، التخفيف] [، مكتمل])

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

    • عرض
      اكتب: Boolean
      استخدم true لإظهار العنصر أو false لإخفائه.

ملاحظة: يحتوي جناح معالجة الأحداث أيضًا على طريقة مسماة .toggle() . الذي يتم تشغيله يعتمد على مجموعة من الحجج التي تم تمريرها.

بدون أي معلمات ، تقوم طريقة .toggle() رؤية العناصر:

$( ".target" ).toggle();

سيتم الكشف عن العناصر المتطابقة أو إخفاؤها على الفور ، مع عدم وجود رسوم متحركة ، عن طريق تغيير خاصية display CSS. إذا تم عرض العنصر في البداية ، فسيتم إخفاؤه. إذا كانت مخفية ، سيتم عرضها. يتم حفظ خاصية display واستعادتها حسب الحاجة. إذا كان العنصر يحتوي على قيمة display inline ، فسيتم إخفاؤه display ، فسيظهر مرة أخرى في inline .

عندما يتم توفير مدة ، أو كائن عادي ، أو وظيفة "كاملة" واحدة ، يصبح .toggle() طريقة متحركة. تقوم طريقة .toggle() بتحريك العرض والارتفاع والعتامة للعناصر المتطابقة في وقت واحد. عندما تصل هذه الخصائص إلى 0 بعد رسم متحرك يخفي ، يتم تعيين خاصية نمط display إلى none لضمان أن العنصر لم يعد يؤثر على تخطيط الصفحة.

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

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

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

يمكننا تحريك أي عنصر ، مثل صورة بسيطة:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

.toggle() ليتم استدعاؤها عند النقر على عنصر آخر:

$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {
    // Animation complete.
  });
});

مع إظهار العنصر مبدئيًا ، يمكننا إخفاؤه ببطء بالنقرة الأولى:

الشكل 1 - رسم توضيحي لتأثير toggle() عند إخفاء الصورة

ستظهر النقرة الثانية العنصر مرة أخرى:

الشكل 2 - رسم توضيحي لتأثير toggle() عند عرض الصورة

يقبل الإصدار الثاني من الأسلوب معلمة منطقية. إذا كانت هذه المعلمة true ، فسيتم عرض العناصر المطابقة ؛ إذا كانت false ، فإن العناصر مخفية. في جوهرها ، البيان:

$( "#foo" ).toggle( display );

ما يعادل:

if ( display === true ) {
  $( "#foo" ).show();
} else if ( display === false ) {
  $( "#foo" ).hide();
}

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

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

أمثلة:

يقوم بتحريك كل الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).toggle();
});
</script>
 
</body>
</html>

عرض:

يقوم بتحريك كل الفقرات ليتم عرضها إذا كانت مخفية ومخفية إذا كانت مرئية ، واستكمال الرسوم المتحركة في غضون 600 جزء من الثانية.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <style>
  p {
    background: #dad;
    font-weight: bold;
    font-size: 16px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).toggle( "slow" );
});
</script>
 
</body>
</html>

عرض:

يعرض جميع الفقرات ، ثم يخفيها جميعًا ، ذهابًا وإيابًا.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
 
<script>
var flip = 0;
$( "button" ).click(function() {
  $( "p" ).toggle( flip++ % 2 === 0 );
});
</script>
 
</body>
</html>

عرض: