005-jQuery效果-淡入淡出
寇桐
<!DOCTYPE html>
<html>
<!--jQuery效果-淡入淡出
jQuery Fading方法
通过jQuery,您可以实现元素的淡入淡出效果
jQuery拥有下面四种fade方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn()方法
jQuery fadeIn()用于淡入已隐藏的元素
语法
$(selector).fadeIn(speed, callback);
可选的speed参数规定效果的时长.他可以取以下值:"slow","fast"或者毫秒
可选的callback参数时fading完成后所执行的函数名称
下面例子展示了faseIn()方法
$(document).ready(function(){
$("button").click(function(){
$(".div1").fadeIn();
$(".div2").fadeIn("slow");
$(".div3").fadeIn(3000);
});
})
jQuery fadeOut()方法
jQuery fadeOut()方法用于淡出可见元素
语法
$(selector).fadeOut(speed, calllback);
可选的speed参数规定效果的时长,他可以取以下值"slow", "fast"或者毫秒
可选的callback参数fading完成后所执行的函数名称
下面的例子演示了带有不同参数的fadeOut()方法
实例
$("#fadeOutBtn").click(function(){
$(".div1").fadeOut(3000);
$(".div2").fadeOut(2000);
$(".div3").fadeOut(1000);
})
jQuery fadeToggle()方法
jQuery fade Toggle()方法可以在fadeIn(), fadeOut方法之间切换
如果元素已经淡出,则fadeToggle()会向元素添加淡入效果
如果元素已经淡入,则fadeToggle()会向元素添加淡出效果
语法
$(selector).fadeToggle(speed, callback);
可选的speed参数规定效果的时长,他可以取下值:"slow", fast或者毫秒
可选的callback参数时fading 完成后所执行的函数名称
下面例子演示了带有不同参数的fade Toggle()方法
$("#fadeToggleBtn").click(function(){
$(".div1").fadeToggle(1000);
$(".div2").fadeToggle(1000);
$(".div3").fadeToggle(1000);
})
jQuery fadeTo()方法
jQuery fadeTo()方法允许渐变为给定得不透明度(值介于0-1之间)
语法
$(selector).fadeTo(speed, opacity, callback);
必需的speed参数规定效果的时长,他可以取下值:"slow", "fast"或者毫秒
fadeTo()方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度(值介于0-1之间)
可选的callback参数是该函数完成之后所执行的函数名称
下面是实例
-->
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeInBtn").click(function(){
$(".div1").fadeIn(1000);
$(".div2").fadeIn(2000);
$(".div3").fadeIn(3000);
});
$("#fadeOutBtn").click(function(){
$(".div1").fadeOut(3000);
$(".div2").fadeOut(2000);
$(".div3").fadeOut(1000);
});
$("#fadeToggleBtn").click(function(){
$(".div1").fadeToggle(1000);
$(".div2").fadeToggle(1000);
$(".div3").fadeToggle(1000);
});
$("#fadeToBtn").click(function(){
$(".div1").fadeTo("slow", 0.15);
$(".div2").fadeTo("slow", 0.4);
$(".div3").fadeTo("slow", 0.7);
});
});
</script>
<style>
.div1{
width: 80px;
height: 80px;
display: none;
background-color: red;
}
.div2{
width: 80px;
height: 80px;
display: none;
background-color: green;
}
.div3{
width: 80px;
height: 80px;
display: none;
background-color: blue;
}
</style>
</head>
<body>
<p>一下实例展示了fadeIn()/fadeOut()使用不同参数有不同效果</p>
<button id="fadeInBtn">点击淡入div元素</button>
<button id="fadeOutBtn">点击淡出div效果</button>
<button id="fadeToggleBtn">淡入/淡出</button>
<button id="fadeToBtn">颜色变淡</button>
<div class="div1"></div><br>
<div class="div2"></div><br>
<div class="div3"></div>
</body>
</html>
类似资料：