jQuery:animate方法实现简单网页动画

hello,大家好,我是wangzirui32,今天我们来学习如何使用jQuery的animate方法实现网页动画。
开始学习吧!

实现动画

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
     
      // 为按钮按下作准备
     	$("#test").click(function(){
     
      // 获取button标签 写入单击事件的处理
    		// animate动画演示
			$("div").animate({
     
     
    			left:'150px', // 往左移150px
    			height:'100px', // height设置为100px
    			width:'100px' // width设置为100px
  			});
  		});
	 });
  </script>
</head>
<body>
  <button id='test'>开始动画</button>
  <!-- position:absolute设置是为了允许标签进行移动 -->
  <div style="background:yellow;height:40px;width:40px;position:absolute;"></div>
</body>
</html>

运行代码,就可以看见jQuery生成的动画了!


今天的课程就到这儿了,喜欢的可以点个收藏和关注,再见!

猜你喜欢

转载自blog.csdn.net/wangzirui32/article/details/115281654
今日推荐