jQuery 停止動畫

Created: October-14, 2018

在本教程中，你將學習如何使用 jQuery 停止執行動畫。

jQuery `stop()` 方法

jQuery stop() 方法用於在完成之前停止當前在所選元素上執行的 jQuery 動畫或效果。

stop() 可以使用以下命令給出 jQuery 方法的基本語法：

$(selector).stop(stopAll, goToEnd);

上述語法中的引數具有以下含義：

可選的 stopAll Boolean 引數指定是否刪除排隊的動畫。預設值為 false ，表示只停止當前動畫，佇列中的其餘動畫將在之後執行。
可選的 goToEnd Boolean 引數指定是否立即完成當前動畫。預設值是 false 。

這是一個簡單的示例，它演示了實際操作中的 jQuery stop() 方法，你可以在單擊按鈕時啟動和停止動畫。

<script type="text/javascript">
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

注意： jQuery stop() 方法適用於所有 jQuery 效果，如淡入淡出，滑動，動畫顯示和隱藏效果以及自定義動畫。

這是此方法的另一個示例，其中，如果在開始動畫之後但在完成動畫之前再次單擊 Slide Toggle 按鈕，則動畫將從儲存的起點開始以相反的方向開始。

<script type="text/javascript">
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

建立平滑的懸停效果

在建立動畫懸停效果時，當你快速放置和移除滑鼠游標時，你可能遇到的常見問題之一是多個排隊動畫。因為，在這種情況下 mouseenter 或 mouseleave 事件在動畫完成之前快速觸發。要避免此問題並建立一個漂亮而平滑的懸停效果，你可以將 stop(true, true) 新增到方法鏈中，如下所示：

<script type="text/javascript">
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

注意： jQuery 方法 stop(true, true) 清除所有排隊的動畫，並將當前動畫跳轉到最終值。

jQuery stop() 方法

建立平滑的懸停效果

jQuery `stop()` 方法