jQuery 3.3

.slideToggle()




jquery

.slideToggle ([المدة] [، مكتمل]) الإرجاع: jQuery

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

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

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

    • خيارات
      اكتب: 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 .slideToggle ([المدة] [، التيسير] [، مكتمل])

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

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

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

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

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

سوف .slideToggle() عند النقر على عنصر آخر:

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

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

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

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

الشكل 2 - رسم توضيحي slideToggle() عند إظهار الصورة

تخفيف

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

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

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

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

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

  • يمكن إيقاف تشغيل جميع تأثيرات jQuery ، بما في ذلك .slideToggle() عالميًا عن طريق تعيين jQuery.fx.off = true ، والذي يقوم بتعيين المدة إلى 0 بشكل jQuery.fx.off . لمزيد من المعلومات ، راجع jQuery.fx.off .
  • إذا تم .slideDown() على قائمة غير مرتبة ( <ul> ) وعناصر <li> لها موضع (نسبي أو مطلق أو ثابت) ، قد لا يعمل التأثير بشكل صحيح في IE6 من خلال IE9 على الأقل ما لم يكن <ul> لديه "تخطيط". لعلاج المشكلة ، قم بإضافة position: relative; zoom: 1; إعلانات CSS إلى ul .

أمثلة:

تحريك جميع الفقرات لتنزلق لأعلى أو لأسفل ، لإكمال الرسم المتحرك في غضون 600 جزء من الثانية.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  p {
    width: 400px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Toggle</button>
<p>
  This is the paragraph to end all paragraphs.  You
  should feel <em>lucky</em> to have seen such a paragraph in
  your life.  Congratulations!
</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).slideToggle( "slow" );
});
</script>
 
</body>
</html>

عرض:

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  div {
    background: #b977d1;
    margin: 3px;
    width: 60px;
    height: 60px;
    float: left;
  }
  div.still {
    background: #345;
    width: 5px;
  }
  div.hider {
    display: none;
  }
  span {
    color: red;
  }
  p {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div class="still"></div>
<div style="display:none;">
</div><div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p><button id="aa">Toggle</button> There have been <span>0</span> toggled divs.</p>
 
<script>
$( "#aa" ).click(function() {
  $( "div:not(.still)" ).slideToggle( "slow", function() {
    var n = parseInt( $( "span" ).text(), 10 );
    $( "span" ).text( n + 1 );
  });
});
</script>
 
</body>
</html>

عرض: