一、淡入淡出
淡入淡出 :其实就是不断改变元素的透明来实现的
1 fadeIn() 带动画的显示
2 fadeOut() 带动画的隐藏
3 fadeToggle() 带动画的切换显示/隐藏
代码示例如下:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
.div1{
width:200px;
height:200px;
position:absolute;
top:50px;
left:10px;
background-color: red;
}
</style>
</head>
<body>
<div class="div1"></div>
<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">慢慢淡入/淡出</button>
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
// 1000毫秒=1秒
$(".div1").fadeOut(1000)
})
$("#btn2").click(function(){
// 1000毫秒=1秒
$(".div1").fadeIn(1000)
})
$("#btn3").click(function(){
// 1000毫秒=1秒
$(".div1").fadeToggle(1000)
})
})
&