手风琴案例+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. 底层解析web安全软件

    试用了一些 web安全软件,服务器安全狗.云锁.绿盟……  感觉里面有些功能是可以手动优化的,大概总结一下. 1.禁止 ping                  这是服务器比较常用的功能,防止pin ...

  2. Vue中你可能认为是bug的情况原来是这样的

    前言 我们知道Vue框架剧本双向数据绑定功能,在我们使用方便的同时,还有一些细节问题我们并不知道,接下来一起探讨一些吧 双向数据绑定 js变量改变影响页面 页面改变影响js变量 Vue2是如何做到数据 ...

  3. win10上使用linux命令

    (1)可以用windows自带的powershell,但是 ll,vim等命令不能使用 (2)Windows更新==>针对开发人员==>开启开发人员模式,然后在控制面板==>程序与功 ...

  4. Sublime Text3添加到右键菜单，"用 SublimeText3 打开"

    在Sublime Text3安装目录下新建一个文件 sublime_addright.inf 文件内容: [Version] Signature="$Windows NT$" [D ...

  5. mysql 使用 limit ，从指定条数读取完，-1失效

    , 原因很简单这种写法本身就是错的,虽然它可以在之前的版本中运行(低优先级),新版本的mysql对此做出了修复,现在的替代方法是第二个参数用一个较大的正数代替 比如你写个 , 感觉这方法很蠢,然鹅我并 ...

  6. C#设计模式学习笔记：(6)适配器模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7640873.html,记录一下学习过程以备后续查用. 一.引言 从今天开始我们开始讲结构型设计模式,结构型设 ...

  7. 一套很有意思的C语言测试题目

    网络上逛博客,发现了一套很有意思的测试题目: https://kobes.ca/ 大家有兴趣可以做一下,考一些关于C语言使用的细节: 中文翻译参考: https://www.cnblogs.com/l ...

  8. 有关鼠标在页面body获取点击事件的问题

    首先说到这个问题我们先来谈谈body的高度问题,关于body高度的设置. 有些小伙伴可能就会说这个是多么的简单,直接进行如下操作不就可以了 body{ height:100%; } 这个设置虽然是想法 ...

  9. webpack打包进行丑化压缩遇到(TypeError Cannot read property 'compilation' of undefined)问题

    今天再重新配置老项目node打包环境的时候遇到了一个问题. 在打包的时候报: TypeError: Cannot read property 'compilation' of undefined 错误 ...

  10. Binder 原理整理

    linux进程间通信方式 1. 管道 管道的实质是一个内核缓冲区,管道的作用正如其名,需要通信的两个进程在管道的两端,进程利用管道传递信息.管道对于管道两端的进程而言,就是一个文件,但是这个文件比较特 ...