<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         ul {

             list-style: none;

         }

         body {

             background: #000;

         }

         .wrap {

             margin: 100px auto 0;

             width: 630px;

             height: 394px;

             padding: 10px 0 0 10px;

             background: #000;

             overflow: hidden;

             border: 1px solid #fff;

         }

         .wrap li {

             float: left;

             margin: 0 10px 10px 0;

         }

         .wrap img {

             display: block;

             border: 0;

         }

     </style>

     <script src="lib/jquery-1.12.2.js"></script>

     <script>

         // 当鼠标移入li分区时，图片突出显示

         // 当鼠标移出li分区时，图片变回正常

         /* 需要添加事件实现排他的时候，尽量添加给有兄弟关系的标签身上 */

         /**

          *      动画队列

          *          动画队列其实JQ动画的特点，只不过有时候这特特点很多时候不需要，

          *          所以我们要清空动画队列，实现效果

          *

          *      清空队列

          *          核心函数：

          *                  .stop()

          *              默认值：

          *                  .stop(true,false)

          *              // 第一个参数：是否清除队列

          *              // 第二个参数：是否跳转到最终效果

          *

          * */

             $(function () {

                 $('li').mouseenter(function () {

                     $(this).stop().siblings().stop().fadeTo(400,0.4);

                     $(this).fadeTo(400,1);

                 })

                 $('.wrap').mouseleave(function () {

                    $('.wrap li').stop().fadeTo(400,1);

                 });

             });

     </script>

 </head>

 <div class="wrap">

     <ul>

         <li><a href="#"><img src="data:images/01.jpg" alt=""/></a></li>

         <li><a href="#"><img src="data:images/02.jpg" alt=""/></a></li>

         <li><a href="#"><img src="data:images/03.jpg" alt=""/></a></li>

         <li><a href="#"><img src="data:images/04.jpg" alt=""/></a></li>

         <li><a href="#"><img src="data:images/05.jpg" alt=""/></a></li>

         <li><a href="#"><img src="data:images/06.jpg" alt=""/></a></li>

     </ul>

 </div>

 </body>

 </html>

多段动画的用法：

1.同时指向多种动画例子：

                 // 写在一起

                 $(this).animate({

                     height:"0px",

                     opacity:0.4

                 },2000);

2.执行队列动画

   <script src="lib/jquery-1.12.2.js"></script>

     <script>

         $(document).ready(function () {

             $('.btn').click(function () {

                 $('.con').animate({bottom:-165})

                     .animate({right:-320},function () {

                           alert('请继续保持开机时间');

                     });

             });

         });

     </script>

JQuery--动画队列以及清空队列.stop()方法的更多相关文章

  1. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  2. jQuery 动画效果 与 动画队列

    基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...

  3. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  4. jQuery 源码分析(十一) 队列模块 Queue详解

    队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...

  5. 看动画学算法之:队列queue

    目录 简介 队列的实现 队列的数组实现 队列的动态数组实现 队列的链表实现 队列的时间复杂度 简介 队列Queue是一个非常常见的数据结构,所谓队列就是先进先出的序列结构. 想象一下我们日常的排队买票 ...

  6. 队列的C++实现（数组）——创建-进队-出队-返回队首元素-清空队列栈-处理队列

    队列的数组实现,从队尾进入,对头删除. 队列长度用标志变量size,它是独立于front和rear的一个变量.size == 0,队列为空.size == capacity,满队列. 一.结点声明 s ...

  7. JQuery动画animate的stop方法使用详解

    JQuery动画animate的stop方法使用详解 animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复 ...

  8. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  9. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

随机推荐

  1. 查找父进程，进程的PEB 进程是否被调试 NtQueryInformationProcess

    这个函数的功能很强大,可以用来查找进程的很多相关信息. 先看一下定义: NTSTATUS WINAPI NtQueryInformationProcess( _In_ HANDLE ProcessHa ...

  2. c++设计模式：模板模式

    模板模式和策略模式的区别: 模板方法模式的主要思想:定义一个算法流程,将一些特定步骤的具体实现.延迟到子类.使得可以在不改变算法流程的情况下,通过不同的子类.来实现“定制”流程中的特定的步骤. 策略模 ...

  3. touch滑动事件---简单小案例

    html: <!--导航栏头部--><div class="type_nav"> <ul class="clearfix " v- ...

  4. NSIS使用WinVer.nsh头文件判断操作系统版本

    NSIS使用WinVer.nsh头文件判断操作系统版本,首先请下载最新的WinVer.nsh: http://nsis.sourceforge.net/Include/WinVer.nsh(下载后置于 ...

  5. naturalWidth、naturalHeight来获取图片的真实宽高

    一般在图片放大缩小,或动态插入图片时使用 function imagea(img){ var w = img.naturalWidth; var h = img.naturalHeight; } 注: ...

  6. nodejs package.json说明

    { "name": "test", //项目名称(必须),由小写英文字母.数字和下划线,不能含空格 "version": "1.0 ...

  7. Hibernate-一对多|多对一-多对多

    1 一对多|多对一 1.1 关系表达 表中的表达 表中的表达  实体中的表达 orm元数据中表达 一对多 多对一 1.2 操作 操作关联属性 1.3 进阶操作 级联操作 结论: 简化操作.一定要用,s ...

  8. webServices学习一（了解基础和作用。）

    一.第一部分 1.         带着几个问题学习: l    什么是WebService? l    它能做什么? l    为什么要学习WebService? l    学习WebService ...

  9. hive启动一些错误记录

    java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMeta ...

  10. Django部署，Django+uWSGI+nginx+Centos部署

    说明:系统是在windows上开发的,使用django1.11.4+python3.6.3开发,需要部署在centos6.4服务器上. 第一步:在Centos6.4上安装Python3.6.2 安装请 ...