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>
  • 相关阅读:
    js验证数字
    两个数组的交集 II---简单
    只出现一次的数字---简单
    存在重复---简单
    旋转数组---简单
    买股票的最佳时机 II---简单
    从排序数组中删除重复项---简单
    开始日常一题leetcode
    第二章 Internet地址结构
    2.2线程
  • 原文地址:https://www.cnblogs.com/colorchild/p/13492765.html
Copyright © 2011-2022 走看看