jQuery animate()动画
程序员文章站
2022-03-16 18:58:40
...
animate(params,[speed],[easing],[fn])，用于创建自定义动画的函数
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
padding:0;
margin:0;
}
div{
width:100px;
height: 100px;
}
.one{
background-color: red;
}
.two{
background-color: blue;
}
</style>
</head>
<body>
<button>添加属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
<script src="jquery-1.12.4.js"></script>
<script>
/*
* animate函数有四个参数:
1.要执行的动画属性
2.动画时长
3.动画效果，默认是swing
4.动画执行完毕的回调函数
*/
$(function(){
$("button").eq(0).click(function(){
$(".one").animate({
width: 300
}, 1000, function(){
alert("动画已执行完毕")
});
$(".two").animate({
width: 300
}, 1000, "linear", function(){
alert("动画已执行完毕")
});
});
$("button").eq(1).click(function(){
$(".one").delay(2000).animate({
width: "+=100"
}, 1000, function(){
alert("动画已执行完毕")
});
});
$("button").eq(2).click(function(){
$(".one").animate({
width: "hide"
}, 1000, function(){
alert("动画已执行完毕")
});
});
})
</script>
</body>
</html>