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>Titletitle>
  <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>

你可能感兴趣的:(jQuery---自定义动画 animate();)