语法格式：

$(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. MySQL中的主键约束和外键约束

      1.主键约束 表通常具有包含唯一标识表中每一行的值的一列或一组列. 这样的一列或多列称为表的主键 (PK),用于强制表的实体完整性. 由于主键约束可保证数据的唯一性,因此经常对标识列定义这种约束. 如 ...

    2. Neo4j图数据库配置文件详解

      For more details and a complete list of settings, please see https://neo4j.com/docs/operations-manua ...

    3. Java 反射理解（一）-- Class 类的使用

      Java 反射理解(一)-- Class 类的使用 概念 这里阐述几个基本概念: 在面向对象的世界里,万事万物皆对象.(在 Java 语言中,静态的成员.普通数据类型除外) 类也是对象,类是 java ...

    4. Java super与this

      一.super()与this() 1.super(): 只能出现在子类构造器中 且必须位于第一行. 所有子类构造器默认调用super()方法 参数决定使用父类哪一个构造器. 若父类没有相应的构造器,则 ...

    5. python之字符串类型及其操作

      1.1字符串类型的表示 字符串是字符的序列表示,可以由一对单引号('). 双引号(")或三引号(’")构成.其中,单引号和双引号都可以表示单行字符串,两者作用相同.使用单引号时,双 ...

    6. python之jupyter notebook

      jupyter是一种交互式计算和开发环境的笔记,ipython命令行比原生的python命令行更加友好和高效,还可以运行web版的界面,支持多语言,输出图形.音频.视频等功能. 安装 pip inst ...

    7. 数组通常在JS中使用

      数组通常在JS中使用,例如具有相同名称的多个输入.如果它们是动态生成的,则需要在提交时确定它们是否是数组.如果(文件).MyList.长度!=“未定义”)此用法不正确.正确的是如果(文件.MyList ...

    8. pycharm的快捷键以及快捷意义

      ctrl+a 全选 ctrl+c 复制(默认复制整行) ctrl+v 粘贴 ctrl+x 剪切(默认复制整行) ctrl+f 搜索 ctrl+z 撤销 ctrl+shift+z 反撤销 ctrl+d ...

    9. 给移动硬盘装win10，知道这些就足够了

      随着制造工业的不断发展,储存介质逐渐廉价化,以某猫和某狗为代表的电商平台上都能轻松买到大容量的原装移动硬盘.如果工厂的产品还不能满足你的要求,那么DIY是一个不错的选择,可以选择购买移动硬盘盒(2.5 ...

    10. [CSS] .class1.class2和.class1 .class2的区别

      .class1.class2(中间没有空格)匹配的是同时拥有class1和class2的元素 <div class="class1 class2">...</di ...