<!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. Css if hack条件语法

    Css if hack条件语法  <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> ...

  2. Vue的Ajax(vue-resource/axios)

    一 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客户 ...

  3. C++继承相关知识点总结

    1:派生类继承基类的成员并且可以定义自己的附加成员.每个派生类对象包含两个部分:从基类继承的成员和自己定义的成员. 每个派生类对象都有基类部分,包括基类的private成员.类可以访问共基类的publ ...

  4. 【Redis缓存机制】1.Redis介绍和使用场景

    (1)持久化数据库的缺点平常我们使用的关系型数据库有Mysql.Oracle以及SqlServer等,在开发的过程中,数据通常都是通过Web提供的数据库驱动来链接数据库进行增删改查. 那么,我们日常使 ...

  5. 【JSOI2018】绝地反击

    题面 50pts 首先当然是二分答案\(mid\), 对于每一个点,以它为圆心的圆,交上攻击轨道: 那么这个点到攻击轨迹的可达范围就是一段圆弧. 怎么求这段圆弧呢? 我们知道圆弧可以用其两端点对于圆心 ...

  6. Python基础---控制执行流程

    一.if语句 1.if语句 作用:让程序根据条件选择性地执行某条语句或某些语句 说明:if语句又叫条件语句,也叫分支语句 语法: if 真值表达式1: 语句块1 elif 真值表达式2: 语句块2 . ...

  7. linux在线用户管理

    LINUX是个多用户系统,一旦连接到网络中,它可以同时为多个登录用户提供服务.系统管理员可以随时了解系统中有那些用户,用户都在进行什么操作. 1.查看该系统在线用户 系统管理员若想知道某一时刻用户的行 ...

  8. MySQL系列(五)--二进制日志对主从复制的影响

    MySQL复制是基于主库上的二进制日志来完成,复制是异步的,可能存在延迟 MySQL日志分为: 1.服务层日志:二进制日志.通用日志.慢查日志 2.存储引擎层日志:innodb中重做日志和回滚日志 二 ...

  9. UnhandledPromiseRejectionWarning: SequelizeConnectionError: Client does not support authentication protocol requested by server; consider upgrading MySQL client

    UnhandledPromiseRejectionWarning: SequelizeConnectionError: Client does not support authentication p ...

  10. 转：Android检查设备是否联网

    public static boolean isConnect(Context context) { ConnectivityManager connectionManager = (Connecti ...