jQuery 3.3

.stop()




jquery

.stop ([clearQueue] [، jumpToEnd]) الإرجاع: jQuery

الوصف: قم بإيقاف الرسم المتحرك الجاري تشغيله على العناصر المتطابقة.

  • وأضاف الإصدار: 1.2 .stop ([clearQueue] [، jumpToEnd])

    • clearQueue (افتراضي: false )
      اكتب: Boolean
      A Boolean يشير إلى ما إذا كنت تريد إزالة الرسوم المتحركة المدرجة في قائمة الانتظار أيضًا. افتراضيات false .
    • jumpToEnd (افتراضي: false )
      اكتب: Boolean
      A Boolean يشير إلى ما إذا كان سيتم إكمال الرسوم المتحركة الحالية على الفور. افتراضيات false .
  • الإصدار المضاف: 1.7 .stop ([queue] [، clearQueue] [، jumpToEnd])

    • طابور
      اكتب: String
      اسم قائمة الانتظار لإيقاف الرسوم المتحركة.
    • clearQueue (افتراضي: false )
      اكتب: Boolean
      A Boolean يشير إلى ما إذا كنت تريد إزالة الرسوم المتحركة المدرجة في قائمة الانتظار أيضًا. افتراضيات false .
    • jumpToEnd (افتراضي: false )
      اكتب: Boolean
      A Boolean يشير إلى ما إذا كان سيتم إكمال الرسوم المتحركة الحالية على الفور. افتراضيات false .

عندما يتم استدعاء .stop() على عنصر ، يتم إيقاف الحركة المتحركة الحالية (إن وجدت) فورًا. على سبيل المثال ، إذا كان عنصر ما مخفيًا بـ .slideUp() عندما يتم استدعاء .stop() ، فسيظل العنصر معروضًا الآن ، ولكنه سيكون جزءًا من ارتفاعه السابق. لا يتم استدعاء وظائف رد الاتصال.

إذا تم استدعاء أكثر من طريقة رسوم متحركة على نفس العنصر ، يتم وضع الرسوم المتحركة الأخيرة في قائمة انتظار التأثيرات للعنصر. لن تبدأ هذه الرسوم المتحركة حتى تكتمل الصورة الأولى. عندما يتم استدعاء .stop() ، يبدأ الرسم المتحرك التالي في قائمة الانتظار على الفور. إذا تم clearQueue المعلمة clearQueue بقيمة true ، clearQueue في قائمة الانتظار ولن يتم تشغيلها مطلقًا.

إذا تم jumpToEnd وسيطة jumpToEnd مع قيمة true ، يتوقف الرسم المتحرك الحالي ، ولكن يتم إعطاء العنصر على الفور قيمه المستهدفة لكل خاصية CSS. في المثال .slideUp() أعلاه ، سيتم إخفاء العنصر فورًا. ثم يتم استدعاء وظيفة رد الاتصال فورًا ، إذا تم توفيرها.

بدءًا من jQuery 1.7 ، إذا تم توفير الوسيطة الأولى كسلسلة ، فسيتم إيقاف الرسوم المتحركة الموجودة في قائمة الانتظار التي تمثلها السلسلة.

.stop() فائدة أسلوب .stop() عندما نحتاج إلى تحريك عنصر على mouseenter و mouseleave :

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123">
</div>

يمكننا إنشاء تأثير تلاشي جميل بدون المشكلة الشائعة في العديد من .stop(true, true) المتحركة في قائمة الانتظار عن طريق إضافة .stop(true, true) إلى السلسلة:

$( "#hoverme-stop-2" ).hover(function() {
  $( this ).find( "img" ).stop( true, true ).fadeOut();
}, function() {
  $( this ).find( "img" ).stop( true, true ).fadeIn();
});

تبديل الرسوم المتحركة

اعتبارًا من jQuery 1.7 ، .stop() إيقاف حركة الرسوم المتحركة قبل الأوان مع .stop() إلى بدء تشغيل .stop() jQuery الداخلية للتتبع. في الإصدارات السابقة ، يؤدي استدعاء الأسلوب .stop() قبل إتمام رسم متحرك متشابك إلى فقدان الرسم المتحرك مسار حالته (إذا كان jumpToEnd خطأ). أي رسوم متحركة لاحقة ستبدأ في حالة "نصف الطريق" جديدة ، مما يؤدي في بعض الأحيان إلى اختفاء العنصر. لمراقبة السلوك الجديد ، انظر المثال الأخير أدناه.

قد يتم إيقاف الصور المتحركة بشكل عام عن طريق تعيين الخاصية $.fx.off إلى true . عند الانتهاء من ذلك ، ستقوم جميع طرق الرسوم المتحركة بتعيين العناصر فورًا في حالتها النهائية عند الاتصال بدلاً من عرض تأثير.

أمثلة:

انقر فوق الزر Go مرة واحدة لبدء الرسم المتحرك ، ثم انقر فوق الزر STOP لإيقافه حيث يتم وضعه حاليًا. خيار آخر هو النقر على عدة أزرار لقائمة انتظارهم ورؤية أن التوقف يقتل فقط واحد يلعب حاليا.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <style>
  div {
    position: absolute;
    background-color: #abc;
    left: 0px;
    top: 30px;
    width: 60px;
    height: 60px;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
 
<script>
// Start animation
$( "#go" ).click(function() {
  $( ".block" ).animate({ left: "+=100px" }, 2000 );
});
 
// Stop animation when button is clicked
$( "#stop" ).click(function() {
  $( ".block" ).stop();
});
 
// Start animation in the opposite direction
$( "#back" ).click(function() {
  $( ".block" ).animate({ left: "-=100px" }, 2000 );
});
</script>
 
</body>
</html>

عرض:

انقر على زر slideToggle لبدء الرسم المتحرك ، ثم انقر مرة أخرى قبل اكتمال الرسم المتحرك. سوف يقوم الرسم المتحرك بتبديل الاتجاه الآخر من نقطة البداية المحفوظة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <style>
  .block {
    background-color: #abc;
    border: 2px solid black;
    width: 200px;
    height: 80px;
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="toggle">slideToggle</button>
<div class="block"></div>
 
<script>
var $block = $( ".block" );
 
// Toggle a sliding animation animation
$( "#toggle" ).on( "click", function() {
  $block.stop().slideToggle( 1000 );
});
</script>
 
</body>
</html>

عرض: