التابع `‎.finish()‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎`‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery

`‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎.finish( [queue ] )‎`

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

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

الوصف

ينهي هذا التابع الحركة الجاري تشغيلها، ويُزيل كل الحركات المدرجة في طابور الانتظار، ويكمل جميع حركات العناصر المطابقة.

`‎.finish( [queue ] )‎`

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

`queue (default: 'fx')‎`

سلسلة نصية من النوع String توضح اسم طابور الانتظار المراد إنهاء الحركة داخله.

عند استدعاء التابع ‎.finish()‎ على عنصر ما، فإن الحركة الجاري تشغيلها حاليًا وجميع الحركات المُدرجة في طابور الانتظار (إن وجدت) تتوقف على الفور وتُضبط خاصيات CSS الخاصة بها إلى قيمها المستهدفة. وتزال جميع الحركات المُدرجة في قائمة الانتظار.

إذا أُدخِل الوسيط الأول، تتوقف فقط الحركات الموجودة في طابور الانتظار التي تمثله تلك السلسلة.

يشبه التابعُ ‎‎.finish()‎ التابعَ ‎.stop(true, true)‎ في أنه يمسح طابور الانتظار ويجعل الحركة الحالية تنتقل إلى قيمتها النهائية. ومع ذلك، فإنه يختلف في أن التابع ‎‎.finish()‎ يؤدي أيضا إلى انتقال خاصيات CSS لجميع الحركات المُدرجة في طابور الانتظار إلى قيمها النهائية.

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

أمثلة

النقر فوق الزر "Go" مرة واحدة لبدء الحركة، ثم النقر فوق الأزرار الأخرى لمعرفة كيفية تأثيرها على الحركات الحالية والموضوعة في طابور الانتظار:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>finish demo</title>
  <style>
  .box {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 15px;
    height: 15px;
    background: black;
  }
  #path {
    height: 244px;
    font-size: 70%;
    border-left: 2px dashed red;
    border-bottom: 2px dashed green;
    border-right: 2px dashed blue;
  }
  button {
    width: 12em;
    display: block;
    text-align: left;
    margin: 0 auto;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="box"></div>
<div id="path">
  <button id="go">Go</button>
  <br>
  <button id="bstt" class="b">.stop( true,true )</button>
  <button id="bcf" class="b">.clearQueue().finish()</button>
  <br>
  <button id="bstf" class="b">.stop( true, false )</button>
  <button id="bcs" class="b">.clearQueue().stop()</button>
  <br>
  <button id="bsff" class="b">.stop( false, false )</button>
  <button id="bs" class="b">.stop()</button>
  <br>
  <button id="bsft" class="b">.stop( false, true )</button>
  <br>
  <button id="bf" class="b">.finish()</button>
</div>
 
<script>
var horiz = $( "#path" ).width() - 20,
  vert = $( "#path" ).height() - 20;
 
var btns = {
  bstt: function() {
    $( "div.box" ).stop( true, true );
  },
  bs: function() {
    $( "div.box" ).stop();
  },
  bsft: function() {
    $( "div.box" ).stop( false, true );
  },
  bf: function() {
    $( "div.box" ).finish();
  },
  bcf: function() {
    $( "div.box" ).clearQueue().finish();
  },
  bsff: function() {
    $( "div.box" ).stop( false, false );
  },
  bstf: function() {
    $( "div.box" ).stop( true, false );
  },
  bcs: function() {
    $( "div.box" ).clearQueue().stop();
  }
};
 
$( "button.b" ).on( "click", function() {
  btns[ this.id ]();
});
 
$( "#go" ).on( "click", function() {
  $( ".box" )
    .clearQueue()
    .stop()
    .css({
      left: 10,
      top: 10
    })
    .animate({
      top: vert
    }, 3000 )
    .animate({
      left: horiz
    }, 3000 )
    .animate({
      top: 10
    }, 3000 );
});
</script>
 
</body>
</html>

مصادر

صفحة المحدد ‎‎‎.finish()‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في توثيق jQuery الرسمي.