Jq 中animate()的使用
程序员文章站
2022-03-16 18:57:04
...
语法：$(selector).animate(styles,speed,easing,callback)
第一个参数是必填项，其它均为可选项。
来个小栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>animate</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{ width: 200px; height: auto;}
p{
width: 100%;
height: 200px;
background-color: yellow
}
span{
display: block;
width: 100%;
height: 0;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script>
setTimeout(()=>{
$('div').prepend($('<span>'))
$('span').animate({
height: '200px'
}, 2000, ()=>{
if($('span').height() >= 200){
$('span').animate({
height: '0px'
}, 2000)
}
})
},1500)
</script>
</body>
</html>
上一篇： CSS3中的动画常用属性
下一篇： 抛物线动效
推荐阅读