返回jQuery动......登陆

jQuery动画作业总结

吴勇文2018-11-10 18:02:2365
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="前端课件/jQuery/jquery-3.3.1.min.js"></script>
    <style type="text/css">
       .div_1{width: 100px;height: 100px;background: red;margin-top: 30px;position: absolute;}
    </style>
</head>
<body>
    <script>
      $(document).ready(function(){
          $('.div_1').mousedown(function(){
             $('.div_1').animate({left:'200px'},1000)
             $('.div_1').animate({top:'200px'},1000)
             $('.div_1').animate({left:'8px',opacity:'0.5'},1000)
             $('.div_1').animate({top:'8px',opacity:'0.5'},1000)            
        })
      })
    </script>
    <div class="div_1"></div>
</body>
</html>

animate({params},speed,fn)需要记住这个语法,结合各种jQuery事件方法可以完美的实现自己想要的动画。

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网