手风琴案例+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. 【转载】详解linux下的串口通讯开发

    来源:https://www.cnblogs.com/sunyubo/archive/2010/09/26/2282116.html 串行口是计算机一种常用的接口,具有连接线少,通讯简单,得到广泛的使 ...

  2. Centos7.5中Nginx报错：nginx: [error] invalid PID number "" in "/run/nginx.pid" 解决方法

    服务器重启之后,执行 nginx -t 是OK的,然而在执行 nginx -s reload 的时候报错 nginx: [error] invalid PID number "" ...

  3. ES[7.6.x]学习笔记（一）Elasticsearch的安装与启动

    Elasticsearch是一个非常好用的搜索引擎,和Solr一样,他们都是基于倒排索引的.今天我们就看一看Elasticsearch如何进行安装. 下载和安装 今天我们的目的是搭建一个有3个节点的E ...

  4. android手机拍照旋转的问题

    android开发中,遇到过手机拍照,明明是竖着拍的,显示的结果却是横这的,困扰了很久,找了很久找了一种解决方法: ExifInterface exifInterface = new ExifInte ...

  5. jdk升级后Eclipse无法启动问题

    overview: 今日安装jdk11,设置好环境变量后,eclipse无法运行,由于项目依赖原因,不想更新eclipse的版本. 我的jdk是1.8,在将环境变量设回1.8后依然无法运行.在多次尝试 ...

  6. Qps从300到1500的优化过程

    最近压测一项目,遇到的性能问题比较典型,过程记录下来,给大家做定位调优参考: 表象: 单接口负载测试,qps最高到300,响应时间200ms,应用cpu达到90%以上,8c机器,如下图,写到这里可能有 ...

  7. win10上使用linux命令

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

  8. echarts配置环形饼图的参数，以及牵引线显示百分比，中间数据

    最近项目有多处是用echarts的,有环形图,折线图,饼图,总结了一下. 本次主要讲环形图,折线图在下期. 这个是最终的效果图.下面附上代码 //三种占比 var myChartType = echa ...

  9. 物联网开源框架Thingsboard使用总结

    Thingsboard中文社区:http://thingsboard.iotschool.com/ 参考网址:https://thingsboard.io/docs/getting-started-g ...

  10. 定义了一个vue全局方法，不能再vuex中进行调用

    你把函数定义在 Vue 的原型链上,只能在 Vue 的实例里才能取到这个方法. vue组件 是一个Vue 的实例,所以你当然能在这里调用到 ajax 方法. 而,vuex 只是一个 vue插件,在 v ...