手风琴案例+stop的使用（解决动画队列的问题）

stop();// 停止当前正在执行的动画

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

      width: 1300px;

    }

    #box {

      width: 1200px;

      height: 400px;

      border: 2px solid red;

      margin: 100px auto;

    }

    #box li {

      width: 240px;

      height: 400px;

      /*border: 1px solid #000;*/

      float: left;

    }

  </style>

</head>

<body>

  <div id="box">

    <ul>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

    </ul>

  </div>

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

  <script>

    $(function () {

      //获取所有的li

      var $li = $("#box li");

      //循环遍历拿到每个li

      for (var i = 0; i < $li.length; i++) {

        //当前的li设置背景图，图片地址用当前的

        $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");

      }

      //注册鼠标进入的事件

      $li.mouseenter(function () {

        //设置在当前li的时候的动画，和兄弟的动画

        $(this).stop().animate({ width: 800 }).siblings().stop().animate({ width: 100 });

      }).mouseleave(function () {

        //设置鼠标离开时候，li的动画

        $li.stop().animate({ width: 240 });

      });

    });

  </script>

</body>

</html>

jQuery---手风琴案例+stop的使用（解决动画队列的问题）的更多相关文章

  1. jQuery学习之路（4）- 动画

    ▓▓▓▓▓▓ 大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 ▓▓▓▓▓▓ jQuery中的动画 ▓▓▓▓▓▓ show()和hide()方法 ...

  2. jQuery源码分析系列(39) : 动画队列

    data函数在jQuery中只有短短的300行代码,非常不起点 ,剖析源码的时候你会发现jQuery只要在有需要保存数据的地方无时无刻不依赖这个基础设施 动画会调用队列,队列会调用data数据接口还保 ...

  3. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  4. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  5. jQuery手风琴广告展示插件

    效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...

  6. jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数

    决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...

  7. jquery hover事件只触发一次动画

    最近工作时遇到个关于动画的问题,如下: $("div").hover( function() { $(this).animate({"margin-top":& ...

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

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

  9. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

随机推荐

  1. 使用Vue.prototype在vue中注册和使用全局变量

    在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创 ...

  2. Aliyun搭建svn服务器外网访问报错权限配置失败错误

    搭建完后所有的配置如下 [root@iZuf655czz7lmtn8v15tsjZ conf]# pwd /home/SVN/conf [root@iZuf655czz7lmtn8v15tsjZ co ...

  3. RJM8L151F6P6温度枪方案对比

    疫情当下,温度计.呼吸机.监护仪.制氧机等医疗产品的生产供应至关重要,红外温度计属于非接触式测温,它是利用物体热辐射与物体温度之间的关系来工作的. 红外测温仪是一种将红外技术与微电子技术相结合的新型温 ...

  4. linux--解决celery消息中间件带来的一系列问题

    启动celery定时任务 1.celery -A OpsManage beat -l info -S django 2.celery -A OpsManage worker -l info 此时消息中 ...

  5. CDC+ETL实现数据集成方案

    欢迎咨询,合作! weix:wonter 名词解释: CDC又称变更数据捕获(Change Data Capture),开启cdc的源表在插入INSERT.更新UPDATE和删除DELETE活动时会插 ...

  6. HTML <link> 标签 PC移动网站适配

    1.在pc版网页上,添加指向对应移动版网址的特殊链接rel="alternate"标记,这有助于百度发现网站的移动版网页所在的位置: <link rel="cano ...

  7. windows快捷键记录

    -1: 装完iis, run -> inetmgr 弹出iis管理器 0.按住Shift键右击鼠标打开命令行窗口 1.ODBC数据源管理器run->odbcad32 2.计算机管理(查看设 ...

  8. 2020软件工程作业01 Deadline: 2020/03/07 20:00pm

    1.建立博客 https://github.com/smithLIUandhisbaby 20177572 https://www.cnblogs.com/smith324/ 2.回顾——我的初心 对 ...

  9. 使用HSSFWorkbook导出、操作excel

    原文地址:https://www.jianshu.com/p/dd1e4f28757b 在实际开发中我们经常需要导入数据,统计数据,并且将统计好的数据导出excel,今天分享一个导出学生信息的方法. ...

  10. 【JZOJ 5048】【GDOI2017模拟一试4.11】IQ测试

    题目大意: 判断一个序列是否是另外一个序列删除若干个数字之后得到的. 正文: 我们可以定义两个指针,分别指向长序列和短序列. 拿样例来举例: 如果指针指的数相同,两个指针都往右跳: 如果不同,则指向长 ...