當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .finish()用法及代碼示例


用法 
.finish(  [queue ] ) => jQuery

說明：停止currently-running 動畫，移除所有排隊的動畫，並完成匹配元素的所有動畫。

  • 添加的版本：1.9.finish( [queue ] )

    • queue(默認：'fx')
      類型：String
      停止動畫的隊列的名稱。

當在元素上調用.finish() 時，currently-running 動畫和所有排隊的動畫(如果有)會立即停止，並將它們的 CSS 屬性設置為它們的目標值。所有排隊的動畫都被刪除。

如果提供了第一個參數，則隻會停止由該字符串表示的隊列中的動畫。

.finish() 方法與.stop(true, true) 類似，它清除隊列，當前動畫跳轉到其結束值。但是，它的不同之處在於 .finish() 也會導致所有 queued 動畫的 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-3.5.0.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>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .finish()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。