<!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. 二进制操作(1)–Bytes

    1,Bytes的单元被当作字符串处理. 例如: 有些介绍会声称上述程序会得到这样的结果:b'\x00\x00\x00\x00' 在python v2.7.10上是得不到此结果的. 实际上,如果 typ ...

  2. utils03_clone远程仓库

    1.Bash here 克隆方式 复制要克隆远程仓库的SSH或者HTTPS 使用Bash here克隆文件 2.使用git同步

  3. 通过三个DEMO学会SignalR的三种实现方式 转载https://www.cnblogs.com/zuowj/p/5674615.html

    一.理解SignalR ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信(即:客户端(Web页面)和服务器端可以互相实时的通知消息 ...

  4. 数据交换格式之 - Json

    Json简介: JSON是JavaScript对象表示法,是一种与语言无关的数据交换的格式,是一种完全独立于语言的文本格式. 使用ajax进行前后台数据交换,移动端与服务端的数据交换. web客户端和 ...

  5. 汇总下几个IP计算/转换的shell小脚本-转

    原文:http://blog.chinaunix.net/uid-20788470-id-1841646.html   1. IP转换为整数> vi ip2num.sh#!/bin/bash# ...

  6. hdu3853之概率dp入门

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xingyeyongheng/article/details/25205693 LOOPS Time ...

  7. jmeter设置代理

    JMeter设置Http代理对web或者app进行录制 一.录制web 1.首先保证JMeter的安装环境都正确.启动JMeter:在安装路径的bin目录下双击jmeter.bat (例如:D:\ap ...

  8. 2018-2-13-visual-Studio-无法调试，提示程序跟踪已退出

    title author date CreateTime categories visual Studio 无法调试,提示程序跟踪已退出 lindexi 2018-2-13 17:23:3 +0800 ...

  9. Tarjan求LCA（离线）

    基本思想 把要求的点对保存下来,在dfs时顺带求出来. 方法 将每个已经遍历的点指向它回溯的最高节点(遍历它的子树时指向自己),每遍历到一个点就处理它存在的询问如果另一个点已经遍历,则lca就是另一个 ...

  10. ASP.NET Core修改IOC为Autofac

    如下是我为了了解如何更换ASP.NET Core中的IOC而查找的文章,如果大家英文OK的,可以直接前往阅读,同时也已经有简单的github例子供大家参考. 参考文章: ASP.NET Core文档: ...