语法格式：

$(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. 怎样理解NodeList的动态集合与静态集合

      NodeList 有两种, 一种是动态集合, 一种是静态集合, 所谓动态集合, 主要是 Node.prototype.childNodes; 返回的子节点集合对文档的节点增删改会即时改变; 而静态集合 ...

    2. charles 抓包 （一）

      在web.app开发中经常需要通过抓包来定位页面.接口返回数据的问题.在mac系统中,charles是一款功能丰富的抓包软件.可以实现app的数据抓包. 工具:charles 附送charles的破解 ...

    3. 【转】js小数转百分比

      转自:js小数和百分数的转换 function toPercent(point){ var str=Number(point*100).toFixed(1); str+="%"; ...

    4. Zend 3.3.0安装 ZendOptimizer 3.3.0 for Windows 稳定版 下载

      用的某php网站系统今天打开时乱码了(zend 200407...),但phpmyadmin能正常使用: 搜索下,重新安装zend可以解决,系统上原来的版本是Zend 3.3.0:下了个,安装后果然把 ...

    5. Html5+Css3小试牛刀

      前因: 我开始做个收款系统,突然客户跑来要插进一个任务,据说他们老板挺在意的,一个小商场,一个首页,一个详情页,UI无自由发挥,要求,尽量好看点. 一番交谈后,确认这是一个对外的网站,最好移动端也能正 ...

    6. 04-【servlet转发和重定向】

      转发: //forward(将 数据传给下一个资源(servlet,jsp ,html等 ,把请求和响应的数据和参数设置带过去 ) request.getRequestDispatcher(" ...

    7. python文件操作：文件指针移动、修改

      一.文件指针移动 二.修改   一.文件指针移动 #大前提:文件内指针的移动是Bytes为单位的,唯独t模式下的read读取内容个数是以字符为单位 # f.read(3) # with open('a ...

    8. linux基础—课堂随笔09_数组

      数组:(6.14 第一节) 取分区利用率,大于百分之八十则发出警报 取分区第一列 取分区使用率: 脚本: 检查脚本语法: ——end 数组切片: 1.跳过前两个取后面 2.跳过前两个取三个 生成10个 ...

    9. Jmeter：非 GUI 命令行执行脚本文件

      介绍 进行性能测试时,Jmeter 官方文档声明是不建议在 GUI 执行的,此时需要用到命令行. 第一步:环境配置 把 Jmeter安装目录\bin 添加到 系统环境变量path 第二步:命令参数 - ...

    10. Linux根目录下各目录文件类型及各项缩写全称

      bin(binary) :常见linux命令.系统所有用户命令目录文件dev(device) : 设备驱动存储目录文件media: 多媒体及挂载目录proc (process):进程信息文件sbin( ...