jQuery-animate方法设置和执行动画
2019-10-16 本文已影响0人
手指乐
-
css动画没法实时控制，比如点击某个元素的时候才触发，所以这种场景必须要使用js方法
-
原生js里面并没有提供动画方法，如果要实现，必须结合定时器，定时改变原生的css样式,或者定义好一个显示动画的class，使用js动态给元素添加class，比如：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<style>
@keyframes my-animation {
0% {
color: red;
}
50% {
color: green;
}
100% {
color: blue;
}
}
.animtest {
animation: my-animation 3s linear;
}
</style>
<script>
function bgAnim() {
document.getElementById("myanim").classList.add("animtest")
}
</script>
</head>
<body>
<div>
<button onclick="bgAnim()">test</button>
<p id="myanim">animation test</p>
</div>
</body>
</html>
元素会在设置class的时候执行一次动画
- jQuery提供animate方法来设置和执行动画，比如点击按钮使某元素逐渐变高
$("button").click(function(){
$("#box").animate({height:"300px"});
});
- 完整语法：
(selector).animate({styles},speed,easing,callback)
styles就是需要控制的css样式，可以是以下值：
可以应用动画的属性：
backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
styles是必需的参数，其他可选，比如速度speed，会有一个默认速度,单位毫秒
-
easing 规定在动画的不同点中元素的速度。默认值是 "swing"。
可能的值：
"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动 -
callback animate 函数执行完之后，要执行的函数。
