<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="GO" id="btnStartAnimate" />
<input type="button" value="Stop" id="btnStopAnimate" />
<div id="div1" style="width:20px;height:20px;background-color:aqua;position:absolute;left:100px;top:100px"></div>
<script type="text/javascript">
$(function () {
$("#btnStartAnimate").click(function () {
//调用animate()方法自定义动画
$("#div1").animate({ "width": "+=200px", "height": "+=150px" }, 1000)
.animate({ "width": "-=150", "height": "+=150px" }, 1000)
.animate({ "width": "+=250", "height": "+=150px" }, 1000)
.animate({ "width": "-=200", "height": "-=200px" }, 1000)
.animate({ "width": "300px", "height": "100px","left":"900px","top":"600px" }, 1000);
});
$("#btnStopAnimate").click(function () {
//停止动画stop()方法,第一个bool参数是指是否清除动画队列,第二个bool参数是指是否跳到动画结尾
$(":animated").stop(true,true);
});
});
</script>
</body>
</html>
JQuery自定义动画
最新推荐文章于 2022-09-23 17:23:20 发布