jquery动画之自定义动画
程序员文章站
2022-03-17 13:07:26
...
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
// var json = {"width":500,"height":500,"left":300,"top": 300,"border-radius":100};
// var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};
//
// //自定义动画
// $("div").animate(json,1000, function () {
// $("div").animate(json2,1000, function () {
// alert("动画执行完毕！");
// });
// });
// //自定义动画
// $("div").animate({"display":"none","opacity":0,"width":0,"height":0},2000);
// $("div").animate({"height":0},2000);
// $("div").animate({"opacity":0},2000);
})
})
</script>
</head>
<body>
<button>动画</button>
<div></div>
</body>
</html>