21-自定义动画

<!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 type="text/javascript" src="jquery-1.12.4.js"></script>

<script type="text/javascript">
    $(function(){
        $('input').eq(0).click(function(){
            //linear
            $('#box1').animate({left:"800px"},1000).animate({top:300})
        })
    })
    
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容