JQuery自定义动画——animate()学习
可以使 用animate 方法创建和实现自定义动画,animate() 方法通过执行 CSS 属性集的自定义动画,满足更多复杂多变的要求。
该方法通过CSS样式将元素从一个状态改变为另一个状态。即通过CSS属性值逐渐改变的,实现动画效果。
一.animate()方法的定义
语法: $(selector).animate(styles, [speed], [easing], [callback])
Styles:必选。规定产生动画效果的 CSS 样式和值。
Speed:可选。规定动画的速度。
Easing:可选。规定在不同的动画点中设置动画速度的 easing 函数: swing/ linear
Callback:可选。回调函数。
Styles参数写法:以键值对形式设置(可能会存在修改多个CSS样式)
如:改变一个div的高度,同时改变宽度透明度等。
$('#box').animate({
height : '200px’,
width : '300px',
opacity : 0.5,
fontSize : '50px’
})
举例:
点击按钮‘执行动画’后
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#box {
width:100px;
margin:25px;
background-color: #6495ed;
position:absolute;
border:3px dashed blue;
}
</style>
</head>
<body>
<input type="button" class="button" value="执行动画!" />
<div id="box">RIA应用开发</div>
<script>
$('.button').click(function () {
$('#box').animate({
width : '300px',
height : '200px',
opacity : 0.5,
fontSize : '50px'
}, 2000, function () {
alert('动画执行完毕!');
});
});
</script>
</body>
</html>
二.animate()方法实现绝对位移动画
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#box {
width:100px;
margin:25px;
background-color: #6495ed;
position:absolute;
border:3px dashed blue;
}
</style>
</head>
<body>
<input type="button" class="button" value="执行动画!" />
<div id="box">RIA应用开发</div>
<script>
// 位移
$('.button').click(function () {
$('#box').animate({
left : '300px',
top : '200px'
}, 10000);
});
</script>
</body>
</html>
三.animate()方法实现相对位移动画
使用 “+=” 或 “-=” 来创建相对动画。
举例:每点击按钮,图片就会相对自己当前的位置右移200px。
实现代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#box {
width:100px;
margin:25px;
background-color: #6495ed;
position:relative;
border:3px dashed blue;
}
</style>
</head>
<body>
<input type="button" class="button" value="执行动画!" />
<div id="box">RIA应用开发</div>
<script>
$(function () {
$('.button').click(function(){
$('#box').animate({
left : '+=100px'
}, 'slow');
});
});
</script>
</body>
</html>
四.animate() 方法回调函数实现列队动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#box {
width:100px;
margin:25px;
background-color: #6495ed;
position:relative;
border:3px dashed blue;
}
</style>
</head>
<body>
<div id="box">RIA应用开发</div>
<script>
$(function () {
$('#box').animate({left : '+=200px'}, function (){
$('#box').animate({left : '+=200px'}, function (){
$('#box').animate({left : '+=200px'
});
});
});;
});
</script>
</body>
</html>
五.animate() 方法连缀实现列队动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#box {
width:100px;
margin:25px;
background-color: #6495ed;
position:relative;
border:3px dashed blue;
}
</style>
</head>
<body>
<div id="box">RIA应用开发</div>
<script>
$(function () {
$('#box').animate({width : '300px'})
.animate({height : '200px'})
.animate({opacity : 0.5})
.animate({fontSize : '50px'})
});
</script>
</body>
</html>
六. stop() 方法停止当前正在运行的动画
语法:$(selector).stop([stopAll], [goToEnd])
参数 stopAll 规定是否停止被选元素的所有加入队列的动画,默认为 false,如果参数为true,当有列队动画的时候,会取消后面的列队动画。
参数 goToEnd 规定是否允许完成当前的动画,默认为 false,如果参数为 true,则停止后立即到达末尾处。(该参数只能在设置了 stopAll参数时使用。)
举例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Jquery(Javascript)</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#box {
width:100px;
margin:25px;
background-color: #6495ed;
position:relative;
border:3px dashed blue;
}
</style>
</head>
<body>
<input type="button" class="button" value="执行动画!" />
<input type="button" id="stop" value="停!"/>
<div id="box">RIA应用开发</div>
<script>
$(function () {
// 位移
$('.button').click(function () {
$('#box').animate({
left : '300px',
top : '200px'
}, 10000);
});
// 停止方法
$("#stop").click(function(){
$("#box").stop(true,true);//直接跳到最后位置
//$("#box").stop(true,false);//停在当前位置
//$("#box").stop();
});
});
</script>
</body>
</html>