语法格式：

$(selector).stop(true, false);

第一个参数:

+ ture: 后续动画不执行

  • false：后续动画会执行

    • 第二个参数：

    • true: 立即执行完成当前动画
    • false: 立即停止当前动画

    如果两个参数都不写， 默认两个都是false。

    实际工作中，直接写stop()用的多。

    案例：鼠标悬停时， 弹出下拉菜单(下拉时带动画)

    <!DOCTYPE html>
    
<html>
    
<head>
    
    <title>停止动画 Demo</title>
    
    <style type="text/css">
    
        *{
    
            margin: 0;
    
            padding: 0;
    
        }

        ul{
    
            list-style: none;
    
        }

        .wrap{
    
            width: 330px;
    
            height: 30px;
    
            margin: 100px auto 0;
    
            padding-left: 10px;
    
            background-color: pink;
    
            display: block;
    
        }

        .wrap li{
    
            background-color: green;
    
        }

        .wrap>ul>li{
    
            float: left;
    
            margin-right: 10px;
    
            position: relative;
    
        }

        .wrap a{
    
            display: block;
    
            height: 30px;
    
            width: 100px;
    
            text-decoration: none;
    
            color: #000；
    
            line-height:30px;
    
            text-align: center;
    
        }

        .wrap li ul{
    
            position: absolute;
    
            top: 30px;
    
            display: none;
    
        }
    
    </style>
    
    <script type="text/javascript" src="jquery.js"></script>
    
    <script type="text/javascript">
    
        $(function () {
    
            var jQuery_li = $(".wrap>ul>li");
    
            //绑定事件
    
            jQuery_li.mouseenter(function(event) {
    
                $(this).children('ul').stop().slideDown(1000);
    
            });

            jQuery_li.mouseleave(function(event) {
    
                $(this).children('ul').stop().slideUp(1000);
    
            });
    
        })
    
    </script>
    
</head>
    
<body>
    
    <div class="wrap">
    
        <ul>
    
            <li>
    
                <a href="javascript:void(0)">一级菜单1</a>
    
                <ul>
    
                    <li><a href="javascript:void(0)">二级菜单2</a></li>
    
                    <li><a href="javascript:void(0)">二级菜单3</a></li>
    
                    <li><a href="javascript:void(0)">二级菜单4</a></li>
    
                </ul>
    
            </li>

            <li>
    
                <a href="javascript:void(0)">二级菜单1</a>
    
                <ul>
    
                    <li><a href="javascript:void(0)">二级菜单2</a></li>
    
                    <li><a href="javascript:void(0)">二级菜单3</a></li>
    
                    <li><a href="javascript:void(0)">二级菜单4</a></li>
    
                </ul>
    
            </li>

            <li>
    
                <a href="javascript:void(0)">三级菜单1</a>
    
                <ul>
    
                    <li><a href="javascript:void(0)">三级菜单2</a></li>
    
                    <li><a href="javascript:void(0)">三级菜单3</a></li>
    
                    <li><a href="javascript:void(0)">三级菜单4</a></li>
    
                </ul>
    
            </li>
    
        </ul>
    
    </div>
    
</body>
    
</html>

    jQuery动画之停止动画的更多相关文章

    1. jQuery 学习02——效果：隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

      jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); ...

    2. jquery中stop停止动画笔记

      jQuery stop() 方法用于停止动画或效果,在它们完成之前. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. 语法: $(selector).stop( ...

    3. jQuery 开始动画，停止动画

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

    4. jq动画和停止动画

      使用jq 实现动画循环效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

    5. 一排盒子，jq鼠标移入的盒子动画移出停止动画,css动画

      css .category > div.active { animation: servicetobig 0.5s ease 1 forwards; } @keyframes serviceto ...

    6. jQuery停止动画——stop()方法的使用

      很多时候需要停止匹配元素正在进行的动画,比如,当鼠标选入元素时显示菜单,鼠标离开时隐藏下拉菜单,如果鼠标移入移出过快的话就会导致动画效果与鼠标的动作不一致的情况,此时stop()就派上用场了. sto ...

    7. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

      一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

    8. jQuery 停止动画

      jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

    9. jQuery 效果 – 停止动画

      jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动 演示 jQuery stop() 方法. jQuery s ...

    随机推荐

    1. 【原创】大叔经验分享（57）hue启动coordinator时报错

      hue启动coordinator时报错,页面返回undefinied错误框: 后台日志报错: runcpserver.log [13/May/2019 04:34:55 -0700] middlewa ...

    2. 关于Webpack打包报错Class constructor FileManager cannot be invoked without 'new'

      前端代码部署一直是自己打包之后将文件用FileZilla上传到服务器上,现在改用运维基于到k8s docker镜像的发布,前端打包报错如下: 经查资料,报错原因是less升级导致的Bug 尝试升级le ...

    3. 斐波那契数列（js）

      //斐波那契数列:后一个数等于前面两个数的和 //0,1,1,2,3,5,8,13,21.... let readline = require("readline-sync"); ...

    4. Docker 备忘

      C/S架构: 客户端发出命令给服务器端(内含守护进程),守护进程执行命令后将结果传回给客户端.(可以远程访问,可以本地访问) 容器内部操作: 可写层下面都是只读的,操作时需要什么文件会被复制到可写层, ...

    5. MySql学习笔记【二、库相关操作】

      命令规范 关键字.函数名称大写 数据库.表名.字段名小写 语句须以分号结尾 切换使用数据库 USE database_name 如:USE test 查看数据库列表 SHOW {DATABASES|S ...

    6. Spring Boot WebFlux整合mongoDB

      引入maven文件 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

    7. Maxwell平滑升级流程

      1. 同步配置文件 copy之前的配置文件     2  关掉监控程序  如果有的话     3  kill掉之前的maxwell程序     4 查询已经读取到的position位置,然后重启服务 ...

    8. contextlib：上下文管理器工具

      介绍 contextlib模块包含的工具可以用于处理上下文管理器和with语句 上下文管理器API ''' 上下文管理器(context manager)负责管理一个代码块中的资源,会在进入代码块时创 ...

    9. /proc/filesystems各字段含义

      /proc/filesystems A text listing of the filesystems which were compiled into the kernel. Incidentall ...

    10. 1.python环境安装

      一:安装Python与环境配置 二:安装pip 三:Anaconda安装和使用 3.1 什么是 Anaconda? Anaconda是专注于数据分析的Python发行版本,支持 Linux, Mac, ...