语法格式：

$(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. CSP2019螺旋升天爆炸记

      Day -N 半年没碰OI的我终于又回到了这个熟悉又陌生的地方.然后颓废了两天就过了初赛? 初赛rp爆棚考了全校第一,然并卵 然后就是打了遍树状数组模板,写挂了(没错我现在连树状数组都会写挂) 看一眼 ...

    2. PowerBI 实现不同角色看到内容不同支持动态权限管理

      首先,在PowerBIDesktop中进行设计,先设计一个权限表: 具体权限如下: 也就是说,这些用户账号在PowerBIService登录时,会分别代表这些用户,接下来会使用一个很重要的动态函数:U ...

    3. C#文本_文件夹操作

      1我们常用的File类 可以用来对文件的一些操作 下面看代码. using System;using System.Collections.Generic;using System.IO;using ...

    4. jdbc原生操作数据库

      jdbc原生操作数据库流程: 第一步:Class.forName()加载数据库连接驱动: 第二步:DriverManager.getConnection()获取数据连接对象; 第三步:根据 SQL 获 ...

    5. 03 Go语言特性

      一.基本注意事项 1.转义字符 \t 一个制表符,代表一次tab \n 换行符 \\ 转义代表 \ \" 转义代表 " \r 一个回车,从当前行的最前面开始输出,会覆盖以前的内容, ...

    6. React+Redux+Dva学习

      Redux提供一些api来管理数据,并且只能通过它提供的方式来修改.Redux包括三个部分:store, action,reducer. store:是一个规范的state,就像一个有条理的数据库,R ...

    7. java八个框架

      在本文中,我只是整理了以下主流框架: 1.阿帕切米纳 项目主页:http://mina.apache.org/ 它为开发高性能和高可用性网络应用提供了一个非常方便的框架,支持基于Java NIO技术的 ...

    8. XSS防御和绕过2

      上一篇已经总结过,这里转载一篇,备忘 0x01 常规插入及其绕过 转自https://blog.csdn.net/qq_29277155/article/details/51320064 1 Scri ...

    9. java技术面试之面试题大全

      转载自:http://blog.csdn.net/lijizhi19950123/article/details/77679489 Java 面试知识点总结 本篇文章会对面试中常遇到的Java技术点进 ...

    10. asp.net中的比较完美的验证码

      要实现如图的效果的验证码,分以下步骤: 第一.布局好调用验证码的登录页面(命名:Login.aspx),注意:验证码位置可以是服务器控件 Image,也可以是html标签写的<img>,但 ...