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生成的动画了!
今天的课程就到这儿了,喜欢的可以点个收藏和关注,再见!