手风琴案例+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. Cacti被监控机器 配置 snmp协议

    SNMP(Simple Network Management Protocol,简单网络管理协议)的前身是简单网关监控协议(SGMP),用来对通信线路进行管理.         snmpd.conf的 ...

  2. 解析如何防止XSS跨站脚本攻击

    2012-11-20 09:03 (分类:网络安全) 这些规则适用于所有不同类别的XSS跨站脚本攻击,可以通过在服务端执行适当的解码来定位映射的XSS以及存储的XSS,由于XSS也存在很多特殊情况,因 ...

  3. Element-UI ( Dropdow )下拉菜单组件command传输对象

    通过 :command绑定对象数据,handleCommand方法处理数据 template <div v-for="(item, index) in FlyWarningList&q ...

  4. centos7使用MySQL的Yum存储库安装mysql5.7.27

    下载yum源 官网地址:http://dev.mysql.com/downloads/repo/yum/ centos7系统: http://dev.mysql.com/get/mysql57-com ...

  5. Java的七大排序

    一.各个算法的时间复杂度 二,具体实现 1.直接选择排序 基本思想:在长度为n的序列中,第一次遍历找到该序列的最小值,替换掉第一个元素,接着从第二个元素开始遍历,找到剩余序列中的最小值,替换掉第二个元 ...

  6. 直接使用汇编编写 .NET Standard 库

    前言 Common Language Runtime(CLR)是一个很强大的运行时,它接收 Common Intermediate Language(CIL) 的输入并最终产生机器代码并执行.CIL ...

  7. 将jsp页面转化为图片或pdf升级版（二）（qq:1324981084）

    java高级架构师全套vip教学视频,需要的加我qq1324981084 上面我们已经将jsp页面转化成html页面了,那么接下来我们的目标是利用这个html页面形成pdf或图片格式.这里我用到的是w ...

  8. scrapy 当当网 爬虫

    前言 好久没有写实战博客了,因为前几个月在公司实习,博客更新就耽搁了下来,现在又受疫情影响无法返校,但是技能还是不能丢的,今天就写一篇使用scrapy爬取当当网的实战练习吧. 创建scrapy项目 目 ...

  9. robotframework安装与详解

    Robot Framework(以下简称rf)是一款python编写的功能自动化测试框架.具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进行分布式测试执行.主要用于轮次 ...

  10. R语言矩阵维度“消失”的问题

    矩阵(matrix)是R语言中很基础的一种数据结构,也是R语言使用者经常使用的一种数据结构.矩阵的维度一般为二维(m*n). R语言中矩阵的操作是非常简单易懂的,但是在对R语言做矩阵操作时,有个地方需 ...