正文

掌握jQuery中stop函数，轻松控制动画暂停与清除

/0 浏览量
0512

在jQuery中，stop() 函数是一个非常有用的工具，它可以帮助开发者更好地控制动画的执行。无论是暂停动画，还是清除动画队列，stop() 函数都能轻松应对。下面，我们就来详细了解一下这个函数的使用方法。

一、stop() 函数的基本用法

stop() 函数的语法如下：

$(selector).stop([clearQueue],[jumpToEnd]);

其中，selector 是一个选择器，用于选择页面中的元素。clearQueue 和 jumpToEnd 是可选参数。

  • clearQueue：一个布尔值，表示是否清除动画队列。如果设置为 true，则动画将被立即停止，并清除队列中所有后续的动画。
  • jumpToEnd：一个布尔值，表示是否将动画跳转到队列的末尾。如果设置为 true，并且 clearQueue 也为 true，则动画会立即跳转到最终状态。

二、暂停动画

当需要暂停正在运行的动画时，可以使用 stop() 函数，并设置 clearQueue 和 jumpToEnd 参数为 false。这样，动画将保持当前状态，等待下一次触发。

以下是一个示例：

$(document).ready(function(){
  $("#button1").click(function(){
    $("#div1").animate({left: '250px'}, 5000);
    $("#button2").click(function(){
      $("#div1").stop();
    });
  });
});

在上面的代码中，当点击按钮 button1 时，会触发一个动画，将元素 #div1 的 left 属性从初始值移动到 250px。当点击按钮 button2 时，动画会被暂停。

三、清除动画队列

如果你想完全停止动画，并清除队列中所有后续的动画，可以将 clearQueue 参数设置为 true。这样，动画会立即停止，并且队列中的所有后续动画都会被清除。

以下是一个示例：

$(document).ready(function(){
  $("#button1").click(function(){
    $("#div1").animate({left: '250px'}, 5000);
    $("#button2").click(function(){
      $("#div1").stop(true);
    });
  });
});

在这个示例中，点击按钮 button2 时，动画会立即停止，并且队列中的所有后续动画都会被清除。

四、跳转到动画队列的末尾

如果你想在动画暂停后，立即跳转到动画队列的末尾，可以将 jumpToEnd 参数设置为 true。这样，动画会立即停止，并且跳转到队列的末尾。

以下是一个示例：

$(document).ready(function(){
  $("#button1").click(function(){
    $("#div1").animate({left: '250px'}, 5000);
    $("#button2").click(function(){
      $("#div1").stop(false, true);
    });
  });
});

在这个示例中，点击按钮 button2 时，动画会立即停止，并且跳转到队列的末尾。

五、总结

stop() 函数是jQuery中一个非常实用的工具，可以帮助开发者更好地控制动画的执行。通过了解并掌握 stop() 函数的各种用法，你可以轻松地暂停、清除或跳转到动画队列的末尾，从而实现更加灵活和高效的动画控制。

-- 展开阅读全文 --