手风琴案例+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. 移动端键盘顶起遮挡输入框&offsetTop值不准问题

    先上图    通常在开发中我们会遇到这样输入框被遮挡的问题,那么该怎么解决呢? 方案一(css): 首先,把置底元素设置成,在页面的底部而非屏幕的底部 .page .bottom { position ...

  2. Objective-C编程 — 并行编程

    多线程 线程的基本概念 线程 (thread)是进程(process)A 内假想的持有 CPU 使用权的执行单位.一般情况下,一个进程 只有一个线程,但也可以创建多个线程并在进程中并行执行.应用在执行 ...

  3. IntelliJ 如何找到项目中 Deprecated 的方法

    在一个项目中,如果我们标记了某些元素为 Deprecated 的话,如何让我们能够快速找到? 简单来说,你可以对项目进行 Code Inspection. 选择 Analyze > Inspec ...

  4. Python——面向对象，简易学生信息管理系统

    一.概述 1.1涉及到的知识点 项目开发:创建项目,创建包,导入包: 面向对象:静态方法,继承,内置函数,自定义函数: 数据类型:列表,字典,字符串.列表.字典的转换和自动生成导向: 异常处理:捕获异 ...

  5. Bash脚本编程学习笔记08：函数

    官方资料:Shell Functions (Bash Reference Manual) 简介 正如我们在<Bash脚本编程学习笔记06:条件结构体>中最后所说的,我们应该把一些可能反复执 ...

  6. Bash脚本编程学习笔记06：条件结构体

    简介 在bash脚本编程中,条件结构体使用if语句和case语句两种句式. if语句 单分支if语句 if TEST; then CMD fi TEST:条件判断,多数情况下可使用test命令来实现, ...

  7. MacBook Pro安装VMware Fusion 11

    下载地址 https://www.vmware.com/cn/products/fusion/fusion-evaluation.html 序列号 TX1NF-PPVRW-A1XAX-X5PVZ-Q7 ...

  8. Docker实战部署JavaWeb项目-基于SpringBoot

    最近在滴滴云上看到服务器很便宜,1核2G,1年只需要68块钱.下面是我基于Docker部署Javaweb服务的过程.目前我见过的最便宜的服务器,阿里云打折的时候都没有这么便宜啊,果断入手.有需要的话可 ...

  9. ftp 拉去远程文件脚本

    ftp 拉去远程文件脚本 cat ftp.sh #!/bin/bash ftp -i -n 192.168.1.1 << EOF user ftpadmin gaofeng binary ...

  10. P1525 关押罪犯【二分+二分图】

    输入输出样例 输入 #1 复制 4 6 1 4 2534 2 3 3512 1 2 28351 1 3 6618 2 4 1805 3 4 12884 思路 对于要求最大值最小的问题,不难想到二分. ...