jQuery自定义动画animate()

2022-08-01 20:31:25 阅读：189 来源： 互联网

标签：jQuery 动画自定义 200 animate 800 div1 left

<!--@description-->
<!--@author beyondx-->
<!--@date Created in 2022/08/01/ 19:03-->
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0px;
    }
    #div1 {
      top:50px;
    }
    #div2 {
      top: 170px;
    }
  </style>
</head>
<body>
  <input type="button" value="从左到右800" id="lr800"/>
  <div id="div1"></div>
<!--  <div id="div2"></div>-->
  </body>
</html>

<script src="jquery-1.12.4.js"></script>
<script>
  //自定义动画 animate();
  //参数1:必选的 对象 代表的是需要做动画的属性
  //参数2:可选的 代表执行动画的时长.
  //参数3:可选的 easing 代表的是缓动还是匀速 linear(匀速)  swing(缓动)   默认不写是缓动
  //参数4:可选的 动画执行完毕后的回调函数.
  $(function () {
    $('#lr800').click(function () {
      // $('#div1').animate({
      //   left: 800,
      //   width: 200,
      //   height: 200,
      //   opacity: 0.5
      // }, 2000, 'linear', function () {
      //   alert('动画执行完毕了');
      // });

      $('#div1').animate({
        left: 800,
        width: 200,
        height: 200,
        opacity: 0.5
      }, 2000, 'linear', function () {
        // 既然这里是一个函数, 那就可以写 任意的代码, 那就可以在这里让 div做动画
        $('#div1').animate({
          left: 400,
          width: 300,
          height: 300,
          top: 150,
          opacity: 1
        }, 2000);
      });

      // $('#div2').animate({
      //   left: 800
      // }, 2000, 'swing');
    });



    //让id为div1的元素动画移动到800那个位置.

    //让id为div2的元素动画移动到800那个位置.
  });
</script>

标签：jQuery,动画,自定义,200,animate,800,div1,left
来源： https://www.cnblogs.com/beyondx/p/16541741.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery自定义动画animate()