jq动画stop如何实现

新建一个html文件，定名为test.html，用于讲解stop若何实现遏制动画。同时，在test.html中加载jquery.min.js

在test.html利用div和CSS建立一个动画的原始结构，一个大正方形包含一个小正方形。

编写一个moveX()函数，实现小正方形在大正方形里面从左移动到右边，再从右边移动到左边的动画结果。代码如下：

在test.html页面建立三个input按钮，并给每个按钮设置一个id属性，用于下面利用stop实现节制动画的结果。

第一个按钮“遏制当前动画”，当按钮被点击时，遏制当前动画，沿原路返回起点，若是返回过程中再点击，会暂停在路中。这是stop（）方式不带参数时实现遏制动画的结果。代码如下：

第二个按钮“遏制所有动画”，当按钮被点击时，遏制所有动画，移动过程中点击遏制会直接达到终点，若是返回过程中再点击，会暂停在路中。这是stop（true）方式带参数时实现遏制动画的结果。代码如下：

第三个按钮“遏制所有动画，达到终点”，当按钮被点击时，遏制所有动画，移动的过程中点击遏制会直接达到终点，若是返回过程中再点击，会遏制在起点。这是stop（true,true）方式带两个参数时实现遏制动画的结果。代码如下：

以上就是stop（）方式在动画中实现遏制动画结果的过程，在利用其操作动画时，必然要考虑是否需要带参数操作动画。

0 条评论