语法格式：

$(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. Office/Visio/Project 2019 专业版iso

      一.Microsoft Office 2019专业增强版1.简体中文版Office Professional Plus 2019 (x86 and x64) – DVD (Chinese-Simpli ...

    2. WebFont技术使用之如何在app中使用自定义字体

      参考 H5自定义字体解决方法(mark) 移动Web字体的使用 [原]移动web页面使用字体的思考 CSS @font-face规则 引用外部服务器字体

    3. [Scala] java使用scala的jar包问题:Exception in thread "main" java.lang.ClassCastException: java.lang.Integer cannot be cast to java.lang.Short

      场景 刚写的scala处理bmp文件的实验, 打了jar包让java调用一下, 结果发生这个错误. package org.tanglizi.bmp.demo; import org.tanglizi ...

    4. STM32F10xxx_Keil中添加的预定义宏

      目录 STM32F10xxx_Keil中添加的预定义宏 更新记录 STM32F10xxx_Keil中添加的预定义宏 更新记录 version status description date autho ...

    5. js之数据类型（对象类型——构造器对象——对象）

      JavaScript中除了原始类型,null,undefined之外就是对象了,对象是属性的集合,每个属性都是由键值对(值可以是原始值,比如说是数字,字符串,也可以是对象)构成的.对象又可分为构造器对 ...

    6. Delphi 卡通控件

      樊伟胜

    7. 第十章· MySQL的主从复制

      一.主从复制简介  2015年5月28日11时,12小时后恢复,损失:平均每小时106.48W$ 1)高可用 2)辅助备份 3)分担负载 复制是 MySQL 的一项功能,允许服务器将更改从一个实例复 ...

    8. Rsync+Sersync实时同步数据目录

      第1章 Rsync简介 1.1 Rsync基本概述 rsync是一款开源的备份工具,可以在不同主机之间进行同步,可实现全量备份与增量备份 全量:将全部数据,进行传输覆盖 增量:只传输差异部分的数据 1 ...

    9. cubase 的 CC控制器使用

    10. Python twisted事件驱动网络框架 源码剖析

      一.Twisted简介 Twisted是一个事件驱动的网络框架,其中包含了诸多功能,例如:网络协议.线程.数据库管理.网络操作.电子邮件等. 事件驱动简而言之,事件驱动分为二个部分:第一,注册事件:第 ...