前言
都是针对被选择的元素
使用方法:$(".div").方法(加或不加时间)
这里列举了常用的11个方法
1 淡入淡出
淡入淡出 不断改变元素的透明来实现的
fadeIn() 带动画的显示(逐渐改变被选元素的不透明度,从隐藏到可见)
fadeOut() 带动画的隐藏(逐渐改变被选元素的不透明度,从可见到隐藏)
fadeToggle() 当动画的切换显示/隐藏(在 fadeIn() 和 fadeOut() 方法之间进行切换)
2 滑动
滑动动画
slideDown() 带动画的展开(通过调整高度来滑动显示被选元素)
slideUp() 带动画的收缩(通过调整高度来滑动隐藏被选元素)
slideToggle() 带动画的切换展开/收缩( slideUp() 和 slideDown() 方法之间的切换)
3 显示隐藏
显示隐藏 默认(指不带时间)是没有动画
show() (不)带动画的显示
hide() (不)带动画的隐藏
toggle() (不)带动画的显示/隐藏
4 自定义动画
JQuery动画的本质 在指定时间内不断的改变元素的样式来实现的
animate() 自定义动画效果
stop() 停止动画
5 完整代码/实现页面
5.1 完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./js/jquery-1.10.1.js"></script>
<style>
.div1 {
width: 200px;
height: 200px;
background: red;
}
button{
height: 30px;
width: 163px;
margin-right: 10px;
margin-bottom: 10px;
}
button:hover{
background-color: red;
}
</style>
<body>
<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">慢慢切换(淡出/淡入)</button><br>
<button id="btn4">慢慢收缩</button>
<button id="btn5">慢慢展开</button>
<button id="btn6">慢慢切换(收缩展开)</button><br>
<button id="btn7">瞬间显示</button>
<button id="btn8">慢慢显示</button>
<button id="btn9">慢慢隐藏</button>
<button id="btn10">慢慢切换(显示/隐藏)</button><br>
<button id="btn11">(自定义动画)慢慢变大</button>
<button id="btn12">停止动画</button>
<button id="btn13">自定义动画</button>
<div class="div1">
</div>
<script>
$(function () {
//淡入淡出
$("#btn1").click(function () {//慢慢消失(淡出)
$(".div1").fadeOut(2000)//2000毫秒
})
$("#btn2").click(function () {//慢慢出现(淡入)
$(".div1").fadeIn(2000)//2000毫秒
})
$("#btn3").click(function () {//淡入淡出切换
$(".div1").fadeToggle(2000)//2000毫秒
})
//收缩展开
$("#btn4").click(function () {
$(".div1").slideUp(2000)//收缩
// $(".div1").css({//单纯的css没法用动画
// height:100
// },2000)
})
$("#btn5").click(function () {//展开
$(".div1").slideDown(2000)
})
$("#btn6").click(function () {//收缩展开切换
$(".div1").slideToggle(2000)
})
//显示隐藏
$("#btn7").click(function () {
$(".div1").show()
})
$("#btn8").click(function () {
$(".div1").show(1000)
})
$("#btn9").click(function () {
$(".div1").hide(1000)
})
$("#btn10").click(function () {
$(".div1").toggle(1000)
})
//自定义动画
$("#btn11").click(function () {
$(".div1").animate({
height: 500,
width: 500,
}, 2000)
})
$("#btn12").click(function () {
//无参数的情况 立即停止当前动画 执行下一个动画
//$(".div1").stop()
//立即停止当前动画 并清空动画队列
//什么是动画队列? 连续动画动作 连续触发多次向右 [左,右,左]
//$(".div1").stop(true,false)
//立即停止当前动画 并且到这次动画的目的地 继续执行下一动画
$(".div1").stop(false, true)
})
//自定义动画
$("#btn13").click(function () {
$(".div1").animate({ height: 500 }, "slow");
$(".div1").animate({ width: 500 }, "slow");
$(".div1").animate({ height: 200 }, "slow");
$(".div1").animate({ width: 200 }, "slow");
});
})
</script>
</body>
</html>