zoukankan      html  css  js  c++  java
  • jQuery---自定义动画 animate();

    自定义动画

    animate();

    第一个参数:{对象},里面可以传需要动画的样式

    第二个参数:speed 动画的执行时间

    第三个参数:easing 动画的执行效果

    第四个参数:callback 回调函数

     

            //第一个参数:对象,里面可以传需要动画的样式
            $("#box1").animate({ left: 800, height: 200 });
            //第二个参数:speed 动画的执行时间
            $("#box1").animate({ left: 800 }, 4000);
            //第三个参数:动画的执行效果
            // //swing:秋千 摇摆
            $("#box2").animate({ left: 800 }, 8000, "swing");
            // //linear:线性 匀速
            $("#box3").animate({ left: 800 }, 8000, "linear");
            //第四个参数:回调函数
            $("#box3").animate({ left: 800 }, 8000, "linear", function () {
              console.log("动画执行完毕");
            });

    合体

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          width: 100px;
          height: 100px;
          background-color: pink;
          position: absolute;
        }
    
        #box2 {
          background-color: blue;
          margin-top: 150px;
        }
    
        #box3 {
          background-color: yellowgreen;
          margin-top: 300px;
        }
      </style>
    </head>
    
    <body>
      <input type="button" value="开始">
      <input type="button" value="结束">
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
    
      <script src="jquery-1.12.4.js"></script>
      <script>
        $(function () {
          $("input").eq(0).click(function () {
    
            //第一个参数:对象,里面可以传需要动画的样式
            //第二个参数:speed 动画的执行时间
            //第三个参数:动画的执行效果
            //第四个参数:回调函数
            //swing:秋千 摇摆
            $("#box1").animate({ left: 800, height: 200 });
            $("#box1").animate({ left: 800 }, 4000);
            $("#box2").animate({ left: 800 }, 4000, "swing");
            $("#box3").animate({ left: 800 }, 4000, "linear", function () {
              console.log("动画执行完毕");
            });
          })
        });
      </script>
    </body>
    
    </html>
  • 相关阅读:
    SpringBoot-容器启动的时候执行一些内容
    Java JVM 启动参数
    leecode刷题(9)-- 有效的数独
    leecode刷题(8)-- 两数之和
    leecode刷题(7)-- 加一
    leecode刷题(6)-- 两个数组的交集II
    leecode刷题(5)-- 只出现一次的数字
    leecode刷题(4)-- 存在重复数组
    leecode刷题(3)-- 旋转数组
    leecode刷题(2)-- 买卖股票的最佳时机
  • 原文地址:https://www.cnblogs.com/childking/p/13492767.html
Copyright © 2011-2022 走看看