你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - JS/JQ - 正文 代码,改变世界!

jQuery中如何停止当然执行的自定义的动画

2018-02-21JS/JQ墨初702°c
A+ A-

上一篇我们介绍了一下jQ中自定义动画animate()的使用方法,虽然说介绍的不够详细,但是基本上按照这个思路是可以使实大部份效果的,今天说一下如何停止当前的动画效果,给他们做个停止的按钮

jQuery中的stop()方法解释

stop():方法可以停止当前正在运行的动画效果

语法

$(selector).stop(stopAll,goToEnd)

注:

stopAll:可选,规定是否停止被选元素的所有加入队列的动画

goToEnd:可选,规定是否允许完成当前动画

举例说明一下,两个参数

设置三个按钮来控制animate()动画

HTML代码

JQ.stop()方法可以停止正在执行的动画

<button id='button'>开始</button>
<button id='button2'>停止当前</button>
<button id='button3'>停止所有</button>
<button id='button4'>完成当前并停止</button>
<!--飞鸟慕鱼博客-->
<div style="width:400px;height:300px;background-color:green;">

JQ代码

$("#button").click(function () {
    $("div").animate({width:"800px",height:"20px"},3000)
    .delay(2000)//两个动画之间的延迟
    .animate({ width: "600px", height: "400px" }, 3000);
});
$("#button2").click(function(){
    $("div").stop();
});
$("#button3").click(function () {
    $("div").stop(true);
});
$("#button4").click(function () {
    $("div").stop(true,true);
});

我们通过对stop()各个参数的不同调用,可以实现不同的功能,停止动画,停止当前动画继续下一个,快速完成当前动画,并停止以后的动画。

PS:如果本篇文章有错误,可以在下面的评论中提出哦!


  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
jQuery中如何停止当然执行的自定义的动画

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录