<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 50px;
height: 50px;
background-color: lightskyblue;
margin: 30px 0 30px 0;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//自定义动画
//累积动画 +=, -=
$(function () {
$("#btn1").click(function () {
$("#box1").animate({
"width":"150px",
"height":"150px"
},1000);
});
$("#btn2").click(function () {
$("#box2").animate({
"width":"+=100px",
"height":"+=100px"
},1000);
});
});
</script>
</head>
<body>
<div id="box1"></div>
<input type="button" id="btn1" value="简单动画">
<div id="box2"></div>
<input type="button" id="btn2" value="累积动画">
</body>
</html>
这篇博客演示了如何使用jQuery库来创建简单的动画效果。通过点击按钮，元素`#box1`和`#box2`分别执行不同的动画：`#box1`平滑地改变宽度和高度至150px，而`#box2`则在其现有尺寸基础上增加100px。此示例展示了jQuery在前端开发中实现动态效果的能力。
扫一扫
737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
