为什么要停止动画？

对同一个元素，如果拥有一个以上的动画对其加以作用，那么后面的动画会被放入一个动画队列中。动画队列的动画是在其上一个动画完成以后才会执行。

控制两个参数四种情况

1、第一个参数表示后续动画是否要执行：true:后续动画不执行 ;false:后续动画会执行

2、第二个参数表示当前动画是否执行完：true:立即执行完成当前动画 ;false:立即停止当前动画

(1)、stop(true,true)后续动画不执行，立即执行完成当前动画

(2)、stop(false,true)后续动画会执行，立即执行完成当前动画

(3)、stop(true,false)后续动画不执行，立即停止当前动画

(4)、stop(false,false)后续动画会执行，立即停止当前动画

我们经常用的是第四种情况stop(false,false)后续动画会执行，立即停止当前动画，默认stop()===stop(false,false)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        ul {

            list-style: none;

        }

        .nav {

            padding-left: 10px;

            width: 330px;

            height: 30px;

            margin: 10px auto;

            background: url("images/bg.jpg");

        }

        .nav li {

            background: url("images/libg.jpg");

        }

        .nav > ul > li {

            float: left;

            margin-right: 10px;

            position: relative;

        }

        a {

            display: block;

            width: 100px;

            height: 30px;

            text-align: center;

            font: 400 15px/30px "simsun";

            text-decoration: none;

            cursor: pointer;

        }

        .nav > ul > li > ul {

            position: absolute;

            top: 30px;

            display: none;

        }

    </style>

    <script src="jquery-1.11.1.js"></script>

    <script>

        $(function () {

            $(".nav>ul>li").mouseenter(function () {

                $(this).children("ul").stop(false, false).slideDown();

            });

            $(".nav>ul>li").mouseleave(function () {

                $(this).children("ul").stop(false, false).slideUp();

            });

        });

    </script>

</head>

<body>

<div class="nav">

    <ul>

        <li>

            <a href="#">一级菜单</a>

            <ul>

                <li><a herf="#">二级菜单</a></li>

                <li><a herf="#">二级菜单</a></li>

                <li><a herf="#">二级菜单</a></li>

                <li><a herf="#">二级菜单</a></li>

            </ul>

        </li>

        <li>

            <a href="#">一级菜单</a>

            <ul>

                <li><a herf="#">二级菜单</a></li>

                <li><a herf="#">二级菜单</a></li>

                <li><a herf="#">二级菜单</a></li>

                <li><a herf="#">二级菜单</a></li>

            </ul>

        </li>

        <li>

            <a href="#">一级菜单</a>

            <ul>

                <li><a herf="#">二级菜单</a></li>

                <li><a herf="#">二级菜单</a></li>

                <li><a herf="#">二级菜单</a></li>

                <li><a herf="#">二级菜单</a></li>

            </ul>

        </li>

    </ul>

</div>

</body>

</html>

jQuery——stop的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  3. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. jQuery实践-网页版2048小游戏

    ▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  9. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  10. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

  1. 分块试水--CODEVS5037 线段树练习4加强版

    感觉这才算入门题吧..前面那些线段树练习,改几个字符就过了一定要搞成几道题.. n<=2e5的数列,给常数K<=2e5,m<=2e5个操作,区间加,问一个区间里K的倍数. 这题空间? ...

  2. android中listview点击监听器onItemClick四个参数的含义

    public void onItemClick(AdapterView<?> arg0, View view, int position, long arg3) X, Y两个listvie ...

  3. 玩一玩MEAN

    参考的书如下: Manning.Getting.MEAN.with.Mongo.Express.Angular.and.Node. 开始再次了解.

  4. java 中public 类

    java 中的文件名是以这个文件里面的public 的那个类命名的(也就是说文件名和这个文件里面的那个public 属性的class 名称一样), 同一个文件中不能放多个(超过2个)的pulic 类. ...

  5. [miniApp] WeChat user login code

    in client/app.js, we put user login logic inside here, so that other module can reuse those code by ...

  6. Photoshop 手动画金标准流程

    以下给出Photoshop手动画金标准的流程, 1. 读取 图片 2. 找到套锁button 3. 利用套锁button手动画金标准 4. 点击套锁区域.右键新建图层 此时能够看到右側出现新建的图层1 ...

  7. 11082 完全二叉树的种类 O(n) 卡特兰数

    11082 完全二叉树的种类 时间限制:800MS  内存限制:1000K提交次数:0 通过次数:0 题型: 编程题   语言: G++;GCC;VC Description 构造n个(2<=n ...

  8. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  9. 【转】 vsftp上传文件出现553 Could not create file解决方法

    因工作需要,需要搭建一个ftp服务器,我使用ubuntu 10.04操作系统,下载vsftpdy源代码, 进行了编译,安装,然后按照INSTALL文件,创建了用户等操作.    因为时间比较紧,我采用 ...

  10. ios8--加载图片

    // // ViewController.m // 06-资源存放问题 #import "ViewController.h" /** 加载图片的方式: 1. imageNamed: ...