zoukankan      html  css  js  c++  java
  • jQuery---手风琴案例+stop的使用(解决动画队列的问题)

    手风琴案例+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({  800 }).siblings().stop().animate({  100 });
          }).mouseleave(function () {
            //设置鼠标离开时候,li的动画
            $li.stop().animate({  240 });
          });
    
        });
      </script>
    </body>
    
    </html>
  • 相关阅读:
    9IDEA常见的快捷键
    8Java类与对象
    5Java运算符
    10Java面向对象中级
    3Java基础
    4Java基础变量
    6Java控制结构
    7Java数组
    11Java面向对象高级
    缓存事件过期监听机制
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12207045.html
Copyright © 2011-2022 走看看