标签:时长 idt html css selector 自定义动画 function char fun
$(selector).animate({params}, speed, callback);
参数:
- params: 必选,要执行动画的CSS属性。
- speed: 可选,执行动画时长。
- callback: 可选,动画执行完成后,立即执行的回调函数。
作用:
执行一组CSS属性的自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动画之自定义动画</title>
<style type="text/css">
div{
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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("动画执行完毕!");
});
});
});
})
</script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>
标签:时长 idt html css selector 自定义动画 function char fun
原文地址:https://www.cnblogs.com/yang-wei/p/9534264.html