<!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. 3.Spring框架中的标签与配置文件分离

    1.Spring框架中标签的配置 1. id属性和name属性的区别 * id -- Bean起个名字,在约束中采用ID的约束,唯一 * 取值要求:必须以字母开始,可以使用字母.数字.连字符.下划线. ...

  2. 使用jstl el表达式对form表单的功能进行区分 比如新建和修改共用一个form

    新建一个专栏,修改这个专栏信息 完全可以做在一个jsp的一个form中 但是,需要注意的是,使用mvc的对象属性自动封装的话 如果id为空,将会报错,无法进入controller中的 所以要在页面上判 ...

  3. 【DM8168学习笔记6】学习思路整理

        DavinciDM8168的开发是一套大的系统,包括ARM.DSP.以及他们的通信协作.对学习思路做简单总结:     一.  对于整体框架的把握 参考了一些文章.介绍davinci整体基础知 ...

  4. 利用Qt自带工具发布程序

    Qt官方开发环境生成的exe发布方式--使用windeployqt 从开始菜单-->Qt 5.4.0-->5.4-->MinGW 4.9 (32-bit)-->Qt 5.4 f ...

  5. bzoj 1123 [POI2008]BLO——点双连通分量

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1123 点双连通分量缩点,然后各种各样. 结果不会写了.比如新连边.记录一个点是割点缩成的点还 ...

  6. webpack4配置react开发环境

    webpack4大大提高了开发效率,简化了配置复杂度,作为一个大的版本更新,作为一个对开发效率执着的爱折腾的程序员,已经忍不住要尝尝鲜了 首先是cli和webpack的分离,开发webpack应用程序 ...

  7. PHP的安全性问题，你能说得上几个？

    一.SQL注入 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意)的SQL命令 ...

  8. 【linux配置】Linux同步网络时间

    Linux同步网络时间 1.date '+%Y%M%D' 按照格式显示当前日期,结果如下: [root@LAMP ~]# date "+%Y-%m-%d %H:%M:%S" -- ...

  9. geoserver与OpenLayers配置

          geoserver与OpenLayers配置         目录   1     准备工作.... 4 1.1      需要用到的程序和资料... 4 2     地图格式转换方式(一 ...

  10. Tomcat中startup.bat启动无效

    error: Linux下启动和关闭tomcat报错,如下图所示: 而在windows下用cmd启动startup.bat也会报如上的错误: Neither the JAVA_HOME nor the ...