jquery动画stop（）方法简介

最新推荐文章于 2020-10-28 09:59:21 发布
最新推荐文章于 2020-10-28 09:59:21 发布
阅读量401 收藏
点赞数
分类专栏： javascript 文章标签： jquery 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yzxzsp11/article/details/50655377
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        #animater{
            width: 150px;
           background-color: #0aa9c1;
           position: absolute;
            top: 100px;
        }
    </style>
    <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
    <script>
        $(function(){
            $('#animater').animate({
                width:'300px',
                height:'200px'
            },10000,function(){
                $('#animater').animate({
                    left:'300px',
                    top:'100px'
                },10000).animate({
                    opacity:'0.2'
                },10000,function(){
                    $('#animater').css('background-color','blue');
                });
            });
            $('#button1').click(function(){
                //默认参数是false,参数一:是否清空队列,参数二:是否直接到当前动画结束效果
                $('#animater').stop();  //立即停止当前动画,不进入下一个
            });
            $('#button2').click(function(){
                //第二个参数默认false
                $('#animater').stop(true);   //停止动画,清空队列
            });
            $('#button3').click(function(){
                $('#animater').stop(false,true);  //直接到达当前动画结束效果
            });
            $('#button4').click(function(){
                $('#animater').stop(true,true);  //直接到达当前动画队列结束效果
            });
        });

    </script>
</head>

<body>
<div id="animater">
    stop()方法测试
</div>
<div id="button">
    <input type="button" id="button1" value="stop()"/>
    <input type="button" id="button2" value="stop(true)"/>
    <input type="button" id="button3" value="stop(false,true)"/>
    <input type="button" id="button4" value="stop(true,true)"/>

</div>
</body>
</html>
yzxzsp11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动画之toggle()方法
weixin_45846303的博客
05-21 596
toggle方法特别实用，很多时候在页面中都会用到，例如： 点击切换位置、显示隐藏元素 其实就是无限的来回切换0和1两种状态，使用起来比if好用太多了！ 例如： 点击切换标签的背景颜色 //记得载入jQuery库 <script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script> <p>点我切换</p>
jquery动画-fadeIn()
whjwhja6的专栏
04-17 671
fadeIn()通过不透明的变化来实现所有匹配元素淡入的效果 fadeout()淡出 fadeTo()渐进 *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ backg
jQuery 停止动画
qq_45844654的博客
12-15 154
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。 实例: jQuery stop() 滑动 jQuery stop() 动画（带有参数） jQuery stop() 方法 jQuery stop() 方法用于停止动画或效果，在它们完成之前。 stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。 语法 $(selector).stop(stop...
jquery stop()方法的讲解使用
习惯有你&的博客
12-23 2958
jQuery中stop()函数用于停止当前匹配元素上正在运行的动画。默认情况下，stop()函数只会停止当前正在运行的动画。如果你使用animate()函数为当前元素设置了A、B、C这3段动画，如果当前正在执行的动画是A，则只会停止动画A的执行，不会阻止动画B和C的执行。当然，你也可以通过指定可选的选项参数来停止所有的动画。 jQuery中stop()函数用于停止当前匹配元素上正在运行的动画。
Jquery中自定义动画stop函数的参数含义
DaftJayee的博客
07-02 635
两个参数含义如下 stop（是否清空动画队列，是否跳转到当前动画终点）
jQuery中停止动画stop
Lawliet
09-10 807
jQuery中停止动画stop 动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止 语法： .stop( [clearQueue ], [ jumpToEnd ] ) .stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] ) stop还有几个可选的参数，简单来说可以这3种情况
JQuery动画animate的stop方法使用详解
10-25
JQuery的animate方法是...理解并熟练运用stop方法对于精细控制JQuery动画至关重要，这使得开发者能够创建更复杂、交互性更强的用户界面。在处理多个连续动画或者需要响应用户交互的场景时，stop方法的作用尤为突出。
详解jQuery停止动画——stop()方法的使用
10-20
总结来说，jQuery的`stop()`方法是管理和控制动画序列的重要工具，尤其在处理用户交互和动态效果时。通过合理地使用`clearQueue`和`gotoEnd`参数，我们可以精确地控制元素动画的行为，确保动画效果与用户的操作保持...
理解jQuery stop()方法
01-19
我们都晓得，在jQuery中有一个很强大的方法——stop(),他是阻止在连续动画或事件中出现重复累积状况的方法。那么，stop()怎么用呢？来带大家先认识一下stop()吧： stop()在语法上有两个参数，分别都是Boolean布尔值...
jQuery stop() 停止动画（详细使用）
卡尔特斯
10-28 724
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px;
jQuery的停止动画
eggplant_的博客
10-18 297
语法格式：  $(selector).stop(stopAll,goToEnd); &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"&gt; &lt;
jQuery——动画篇（隐藏显示、上卷下拉、淡入淡出、animate、stop、each）
热门推荐
anfangw的博客
12-16 1万+
jQuery——动画篇（隐藏显示、上卷下拉、淡入淡出、animate、stop、each 、inArray、get、index）
21.调用stop()方法停止当前所有动画效果
weixin_34221332的博客
03-19 469
stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为： $(selector).stop([clearQueue],[goToEnd]) 其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。 例如，在页面中，当图片元素正...
jQuery中animate()方法用法实例
majunzhu的博客
04-09 690
转：http://www.jb51.net/article/58919.htm本文实例讲述了jQuery中animate()方法用法。分享给大家供大家参考。具体分析如下：此方法用于创建自定义动画，并且能够规定动画执行时长、擦除效果。动画完成后还可以地触发一个回调函数。animate()方法的使用:方式一:以“属性名/值”对象的方式定义动画终止样式属性。例如: 复制代码代码如下:$("div").a...
jQuery动画animate停止方法stop使用介绍
陈小妹的专栏
08-26 7566
Panel *{margin:0;padding:0;} body { font-size: 13px; line-height: 130%; padding: 60px } #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} .head { padding: 5px; backgroun
转载：jQuery停止动画——stop()方法的使用
jun_sun_shine的博客
07-06 438
jQuery停止动画——stop()方法的使用转载地址　　很多时候需要停止匹配元素正在进行的动画，比如，当鼠标选入元素时显示菜单，鼠标离开时隐藏下拉菜单，如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况，此时stop()就派上用场了。 stop()方法的语法结构为： stop([clearQueue],[gotoEnd]);
jquery的stop失效
最新发布
06-09
3. 如果你正在使用 jQuery 版本 1.7 及更高版本，则需要指定动画队列名称，以便 stop() 方法可以正确地停止该队列中的动画。例如，如果你正在使用名为“myQueue”的自定义队列，请使用 stop('myQueue') 来停止该队列...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值