1.stop()方法解析

  • 停止所有在指定元素上正在运行的动画
  • stop(clearQueue,gotoEnd)
  • 这个两个参数可选值是布尔值
  • stop(flase,flase):不请空动画队列，不立即跳到动画最后
  • stop(true,true):请空动画队列，立即跳到动画最后
  • stop(flase,true):不请空动画队列，立即跳到动画最后
  • stop(true,flase):请空动画队列，不立即跳到动画最后

2.代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>stop用法</title>

    <style>

        #box {

            width: 100px;

            height: 100px;

            position: absolute;

            top: 50px;

            left: 50px;

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <button id="btn1">stop(false,false)</button>

    <button id="btn2">stop(true,true)</button>

    <button id="btn3">stop(false,true)</button>

    <button id="btn4">stop(true,false)</button>

    <div id="box"></div>

    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>

    <script>

        var box = $("#box")

        box.animate({

            left: 300

        }, 1000)

        box.animate({

            top: 300

        }, 1000)

        box.animate({

            left: 50

        }, 1000)

        box.animate({

                top: 50

            }, 1000)

            //stop(flase,flase):不请空动画队列，不立即跳到动画最后

        $("#btn1").click(function() {

                box.stop(false, false)

            })

            // stop(true,true):请空动画队列，立即跳到动画最后

        $("#btn2").click(function() {

                box.stop(true, true)

            })

            // stop(flase,true):不请空动画队列，立即跳到动画最后

        $("#btn3").click(function() {

                box.stop(false, true)

            })

            // stop(true,flase):请空动画队列，不立即跳到动画最后

        $("#btn4").click(function() {

            box.stop(true, false)

        })

    </script>

</body>

</html>

jQuery-stop方法的更多相关文章

  1. Django配合使用Jquery post方法

    Django使用jQuery的post方法需要解决两个问题: 1.Django中为了防止跨站请求,在post提交时都会带上csrf_token,利用Jquery进行post请求也需要:否则就会出现40 ...

  2. jQuery on()方法

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  3. jquery ajax 方法及各参数详解

    1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type ...

  4. jquery.extend方法

    jquery.extend()用来扩展jquery中方法,实现插件. 1.jQuery.extend函数详细用法! 扩展jQuery静态方法. 1$.extend({ 2test:function() ...

  5. jQuery extend方法使用及实现

    一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样 ...

  6. 优化加载jQuery的方法

    请看下面的一段代码: <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ...

  7. C#实现jQuery的方法连缀

    jQuery的方法连缀使用起来非常方便,可以简化语句,让代码变得清晰简洁.那C#的类方法能不能也实现类似的功能呢?基于这样的疑惑,研究了一下jQuery的源代码,发现就是需要方法连缀的函数方法最后返回 ...

  8. jQuery原型方法each使用和源码分析

    jQuery.each方法是jQuery的核心工具方法之一,通用例遍方法,可用于例遍对象和数组.不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象.通常需要两个参数 ...

  9. jQuery.clean()方法源码分析（一）

    在jQuery 1.7.1中调用jQuery.clean()方法的地方有三处,第一次就是在我之前的随笔分析jQuery.buildFramgment()方法里面的,其实还是构造函数的一部分,在处理诸如 ...

  10. MVC中使用Ajax提交数据 Jquery Ajax方法传值到action

    Jquery Ajax方法传值到action <script type="text/javascript"> $(document).ready(function(){ ...

随机推荐

  1. P1750 出栈序列

    这好像是普及难度的吧~ 感觉再次被小学生吊打了........ \(\color{Red}{----------------------=|(●'◡'●)|=我是手动的分割线------------- ...

  2. Codeforces Round #626 D. Present

    D. Present 题目大意:给你一个大小是n的序列,求两两之间相加进行异或之后的答案. 这个题目我并没有想到怎么写,有点偷懒于是就去看了题解.. 题解很套路... 题解: 因为这个是用到了异或,所 ...

  3. Spring杂谈 | Spring中的AutowireCandidateResolver

    接口定义 用于推断一个特定的beanDefinition是否能作为指定依赖的候选者的策略接口 public interface AutowireCandidateResolver { // 默认情况下 ...

  4. vue 如何实现 Input 输入框模糊查询方法

    原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item, ...

  5. BufferedInputStream:字节缓冲输入流

    package com.itheima.demo01.BufferedStream; import java.io.BufferedInputStream; import java.io.FileIn ...

  6. 搭建私有镜像仓库registry 2.0

    搭建 docker run -d -p 5000:5000 --restart=always --name registry2 registry:2 就可以将自己的镜像 push到这个私有的镜像仓库 ...

  7. Asp.net Core 3.1 Razor视图模版动态渲染PDF

    Asp.net Core 3.1 Razor视图模版动态渲染PDF 前言 最近的线上项目受理回执接入了电子签章,老项目一直是html打印,但是接入的电子签章是仅仅对PDF电子签章,目前还没有Html电 ...

  8. RabbitMQ及延时队列

    一.简介 我用过RabbirMQ的发布订阅模式,以及一对一的延迟队列. 1.RabbitMQ的有消息确认机制,消费一条则队列中少一条,也有对应的消费到消息及认为是消费成功这样的模式,一般使用前者. 发 ...

  9. js倒计时 手机休眠时 时间不进行减少

    http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...

  10. 【面试考】【入门】决策树算法ID3，C4.5和CART

    关于决策树的purity的计算方法可以参考: 决策树purity/基尼系数/信息增益 Decision Trees 如果有不懂得可以私信我,我给你讲. ID3 用下面的例子来理解这个算法: 下图为我们 ...