开始动画animate({},speed,callback)方法
- 语法详解:animate({},speed)
- {}里面放动画的效果，大小、滑动…
- speed是动画的时间，单位毫秒
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<style>
div{
margin:10px auto;
width:400px;
height:400px;
background-color:green;
position:relative;
font-size:100px;
line-height:400px;
text-align:center;
}
button{
display:block;
margin:10px auto;
}
</style>
</head>
<body>
<button>开始动画</button>
<div>Hello</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
opacity:'0.2',width:'500px'},1000);
$("div").animate({
opacity:'0.2',height:'500px'},1000);
$("div").animate({
opacity:'0.8',width:'400px'},500);
$("div").animate({
opacity:'0.8',height:'400px'},500);
});
});
</script>
</body>
</html>
opacity是透明度，介于0和1之间；width意思是点击之后宽度变为500px，变化时间是1000毫秒，其它的是同理的。
注：这里用到了Queue队列，如果大家对队列不熟悉可以去看看视屏补一补。
停止动画stop(stopAll,goToEnd)方法
- 停止动画
- 语法：
stop(stopAll,goToEnd) - stopAll为是否清除动画队列(即排在正在执行动画后面的动画)，默认是false。stopAll为false时意为仅停止当前正在执行的动画，后面的动画会继续执行；sopAll为true时意为停止正在执行的动画并且清除还未执行的动画。
- goToEnd为是否立即完成正在执行的动画，默认为false。goToEnd为false时意为不立即完成该动画；为true时则是立即完成该动画。
上代码：
- 语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<style>
div{
margin:10px auto;
width:200px;
height:200px;
background-color:green;
position:relative;
font-size:20px;
line-height:200px;
text-align:center;
}
button{
display:block;
margin:10px auto;
}
</style>
</head>
<body>
<button id="btn1">开始动画</button>
<button id="btn2">停止动画</button>
<div>Hello</div>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").animate({
opacity:'0.2',width:'600px'},1000);
$("div").animate({
opacity:'0.2',height:'600px'},1000);
$("div").animate({
opacity:'0.8',width:'200px'},500);
$("div").animate({
opacity:'0.8',height:'200px'},500);
});
$("#btn2").click(function(){
$("div").stop(false,false);
});
});
</script>
</body>
</html>