Jquery中动画
三组基本动画
显示(show)与隐藏(hide)与切换是一组动画：
滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)
show() hide() toggle()三个方法参数一致
show([speed], [callback]);
speed(可选)：动画的执行时间
1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
callback(可选):执行完动画后执行的回调函数
例1:使用show与hide实现红色div的显示,与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background-color: #f99;
display: none;
}
</style>
</head>
<body>
<button>展示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script src="./jquery.js"></script>
<script>
$(function(){
// show(speed, callback)
// hide(speed,callback)
// toggle(speed,callback)
// 不传参，就没有动画效果
// 主要修改的时候元素的width、height、opacity
// 三个参数都是可选的
// 参数：
// speed： 动画时长，单位是ms，默认还提供了三个字符串的值，可选
// "slow": 600
// "normal": 400
// "fast": 200
// 如果传递的是除了上面三个之外的字符串，取normal
// callback: 动画结束的时候来执行的函数,可选
$("button").eq(0).click(function(){
$("div").show(1000, function(){
console.log("show 动画结束了");
});
})
$("button").eq(1).click(function(){
$("div").hide(1000, function(){
console.log("hide 动画结束了");
});
})
$("button").eq(2).click(function(){
$("div").toggle(1000, function(){
console.log("toggle 动画结束了");
});
})
})
</script>
</body>
</html>
例2: 使用slide系列,类似卷帘门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background-color: #f99;
display: none;
}
</style>
</head>
<body>
<button>展示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script src="./jquery-2.4.4.js"></script>
<script>
$(function(){
// slideDown(speed, easing, callback)
// slideUp(speed, easing, callback)
// slideToggle(speed, easing, callback)
// 不传参，有动画效果，normal = 400
// 参数和show方法一样，主要是动画效果不同
$("button").eq(0).click(function(){
$("div").slideDown(3000, function(){
console.log("slideDown 运动结束了");
});
})
$("button").eq(1).click(function(){
$("div").slideUp(3000, function(){
console.log("slideUp 运动结束了");
});
})
$("button").eq(2).click(function(){
$("div").slideToggle(3000, function(){
console.log("slideToggle 运动结束了");
});
})
// fadeIn()
// fadeOut()
// fadeToggle()
})
</script>
</body>
</html>
例3:fade的淡入与淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background-color: #f99;
display: none;
}
</style>
</head>
<body>
<button>展示</button>
<button>隐藏</button>
<button>切换</button>
<button>淡一般</button>
<div></div>
<script src="./jquery-1.4.4.js"></script>
<script>
$(function(){
// fadeIn(speed, easing, callback)
// fadeOut(speed, easing, callback)
// fadeToggle(speed, easing, callback)
// 不传参，有动画效果，normal = 400
// 参数和show方法一样，主要是动画效果不同
$("button").eq(0).click(function(){
$("div").fadeIn(3000, function(){
console.log("slideDown 运动结束了");
});
})
$("button").eq(1).click(function(){
$("div").fadeOut(3000, function(){
console.log("slideUp 运动结束了");
});
})
$("button").eq(2).click(function(){
$("div").fadeToggle(3000, function(){
console.log("slideToggle 运动结束了");
});
})
$("button").eq(3).click(function(){
$(".box").fadeTo(1000,0.5)
})
// fadeIn()
// fadeOut()
// fadeToggle()
})
</script>
</body>
</html>
自定义动画
语法
$(selector).animate({
params},[speed],[easing],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// easing:执行效果，默认为swing（缓动） 可以是linear（匀速）
// callback：动画执行完后立即执行的回调函数（可选）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height:100px;
background: red;
position: absolute;
top: 50px;
}
</style>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="开始" />
<div class="box"></div>
</body>
<script src="./jquery.2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
基本动画案例
一次性全部执行完毕
//情况1 基本动画案例
$("#btn1").click(function(){
$(".box").animate({
width:"+=100px", // 在原来基础上添加100px
height:200, // 目标值
left:300,
top:200
})
})
回调式动画
使用回调函数,执行一个样式完成后,在函数函数中,再执行另一个
$("#btn1").click(function(){
$(".box").animate({
width:"+=100px"
},function(){
$(".box").animate({
height:200
})
})
链式调用
jq提供了动画队列来实现依次执行动画的效果, 给元素的动画队列添加多个动画，依次来执行动画队列里面的动画, 就是链式编程的写法
// 如果链式的动画调用的还是之前那个元素
$(".box").animate({
width:"+=200px"
}).animate({
height:"+=200px"
})
特殊情况
1 如在动画完成后,需要通过.css(),设置,样式,则必须使用回调函数
在animate之后,调用其他方法,会异步执行
$(".box").animate({
width:"+=200px"
}).animate({
height:"+=200px"
}).css({
background:"yellow"})
// 只能使用回调函数
$(".box").animate({
width:"+=200px"
}).animate({
height:"+=200px"
},function(){
$(".box").css({
background:"yellow"
})
}).animate({
left:300
})
2 也可以单独设置一个函数,来完成动画完成后的其他操作
queue()在所有的动画结束后,调用
// 情况四 jQuery单独设置了一个方法,用来解决其他方法的异步执行,等同于回调函数
$('input').click(function(){
$('.box').animate({
width:300},2000)
.animate({
left:500},2000)
.queue(()=>{
$('.box').css({
background:'blue'});
})
})
动画的小案例
$(’#div1’).slideDown(1000); //向下展开，下拉。1000毫秒，表示动画展开过程时间。
$(’#div1’).slideUp(1000); //向上收起
$(’#div1’).slideToggle(1000); //合成展开收起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: #f99;
position: relative;
text-align: center;
}
</style>
</head>
<body>
<div>swing</div>
<script src="./jquery-2.2.4.js"></script>
<script>
// 动画队列
// jq提供了动画队列来实现依次执行动画的效果
// 给元素的动画队列添加多个动画，依次来执行动画队列里面的动画
// 就是链式编程的写法
// $("div").animate({
// left: 500
// }, 1000)
// .animate({
// top: 300
// }, 1000)
// .animate({
// borderRadius: 50
// }, 1000)
// .slideUp(1000)
// .slideDown(1000);
// 有了动画队列的好处：
// 依次执行动画
// 坏处：
// 如果元素动画频发的触发，就会不停的去做动画队列的里面的动画
})
</script>
</body>
</html>
动画队列与动画的停止
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。
//stop方法：停止动画效果
stop(clearQueue, jumpToEnd);
//第一个参数：是否清除队列
//第二个参数：是否跳转到最终效果
动画的延迟
jq对象.delay(2000).animate()
以毫秒为单位
例:让所有的动画延迟2s执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;height:100px;background: red;position: absolute;}
</style>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="开始" />
<input type="button" name="btn1" id="btn2" value="停止" />
<div class="box"></div>
</body>
<script src="../jquery.2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#btn1").click(function(){
$(".box").delay(2000).animate({
left:500
},2000).delay(2000).animate({
top:300
},2000).delay(2000).animate({
left:0
},2000).delay(2000).animate({
top:40
},2000)
})
$("#btn2").click(function(){
$(".box").stop(true,false)
})
</script>
</html>
动画的队列(总结)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div></div>
<script src="jquery-2.2.4.js"></script>
<script>
$(function () {
$("#btn").click(function () {
//把这些动画存储到一个动画队列里面
$("div").animate({
left:800})
.animate({
top:400})
.animate({
width:300,height:300})
.animate({
top:0})
.animate({
left:0})
.animate({
width:100,height:100})
})
});
</script>
</body>
</html>
动画的停止 stop方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div></div>
<script src="jquery-2.2.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
$("div").slideDown(4000).slideUp(4000);
});
$("input").eq(1).click(function () {
//stop:停止当前正在执行的动画
//clearQueue:是否清除动画队列 true false
//jumpToEnd:是否跳转到当前动画的最终效果 true false
//.stop().animate();
$("div").stop(true, true);
})
});
</script>
</body>
</html>