jquery的stop()方法如何使用

本篇内容主要讲解“jquery的stop()方法如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery的stop()方法如何使用”吧!

创新互联建站专注于梧州网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供梧州营销型网站建设，梧州网站制作、梧州网页设计、梧州网站官网定制、微信小程序开发服务，打造梧州网络公司原创品牌,更为您提供梧州网站排名全网营销落地服务。

在jquery中，stop()方法用于为被选元素停止当前正在运行的动画效果，语法“$(selector).stop(stopAll,goToEnd)”；参数stopAll和goToEnd都是可选参数，其取值都是布尔值，默认值都是false。

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

在jquery中，stop()方法用于为被选元素停止当前正在运行的动画效果。

语法：

$(selector).stop(stopAll,goToEnd)

stopAll 和 goToEnd 都是可选参数，它们的取值都是布尔值，默认值都是 false。stopAll 表示停止队列动画。当取值为 false 时，仅停止当前动画；当取值为 true 时，停止当前动画以及后面所有的队列动画。goToEnd 表示将动画跳转到当前动画效果的最终状态。

其中，stop() 方法共有 4 种形式，如表 1 所示。

一般来说，在实际开发中我们只会用到 stop() 方法的第 1 个参数，很少用到第 2 个参数。

举例：

    
    
    
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    
    
    
    


    
    
    

预览效果下图所示。

在这个例子中，我们使用 animate() 方法定义了 4 个动画。我们点击【开始】按钮后，过了一会儿如果再点击【停止】按钮，就会立即停止当前执行的动画（也就是停止当前的 animate() 方法），然后跳到下一个动画（也就是下一个 animate() 方法）。

如果再次点击【停止】按钮，它又会跳到下一个动画，以此类推。小伙伴们可以自行测试来感受一下。

如果想要停止所有的队列动画，可以通过定义 stop() 方法的第一个参数为 true 来实现，代码如下：

$("#btn-stop").click(function () {
    $("div").stop(true);
})

举例：

    
    
    
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    
    
    


    

预览效果下图所示。

在这个例子中，我们使用 hover() 方法定义鼠标指针移入和鼠标指针移出时的动画效果。当我们快速地移入或移出元素时，会发现一个很奇怪的 bug：元素会不断地变长或变短！也就是说，动画会不断执行，根本停不下来。

这种“根本停不下来”的 bug 在实际开发中经常会碰到，小伙伴们一定要特别注意。实际上，这个 bug 是由动画累积所导致的。在 jQuery 中，如果一个动画没有执行完，它就会被添加到“动画队列”中去。在这个例子中，每一次移入或移出元素，都会产生一个动画，如果该动画没有被执行完，它就会被添加到动画队列中去，然后没有被执行完的动画会继续执行，直到所有动画执行完毕。

针对这个 bug，我们只需要在移入或移出元素产生的动画执行之前加入 stop() 方法，就能轻松解决。最终修改后的代码如下。

$("div").hover(function () {
    $(this).stop().animate({ "height": "150px" }, 500);
}, function () {
    $(this).stop().animate({ "height": "50px" }, 500);    //移出时返回原状态
})

对于这种由于动画累积产生的 bug，我们还可以通过is(":animated")来判断当前的动画状态并解决。对于is(":animated")这种方式，之后会详细介绍。

实际上，jQuery 还有一个方法可以中断动画——finish()。这个方法与 stop(true,true) 方法效果类似，因为它会清除排队的动画并使当前动画跳到最终值。不过，与 stop(true,true) 不同的是，它会使所有排队的动画都跳到各自的最终值。finish() 方法用得不多，我们简单了解一下即可。

到此，相信大家对“jquery的stop()方法如何使用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！