jQuery自定义动画
程序员文章站
2024-03-25 14:39:04
...
使用animate()来完成
比如：
1.逐渐扩大
1）宽高都扩为200px
2)宽先阔为200px,高后扩为200px
2移动到指定位置
1）移动到（500，100处）
2）移动到（100，20处）
3.移动指定距离
1）移动距离为（100，50）
2）移动距离为（-100，-20）
4.停止动画：使用stop()来停止动画
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 300px;
background-color: #00FFFF;
}
</style>
<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
<script type="text/javascript">
$(function(){
var $div1 = $("#div1");
$("#btn1").click(function(){
//1.1
// $div1.animate({
//
// width:200,
// height:200
// },2000);
//1.2
$div1.animate({
width:200,
}).animate({
height:200,
});
});
$("#btn2").click(function(){
//2.1
// $div1.animate({
// left:500,
// top:100,
// });
//2.2
$div1.animate({
left:100,
top:20,
},1000);
});
$("#btn3").click(function(){
//3.1
// $div1.animate({
// left:"+=100",
// top:"+=50"
// });
//3.2
$div1.animate({
left:"-=100",
top:"-=50",
});
});
$("#btn4").click(function(){
$div1.stop();
});
});
</script>
</head>
<body>
<button id="btn1">逐渐扩大</button>
<button id="btn2">移动到指定位置</button>
<button id="btn3">移动指定距离</button>
<button id="btn4">停止动画</button>
<div id="div1">热爱可抵岁月漫长</div>
</body>
</html>