通过淡入淡出的方法来实现效果
-
fadeIn
通过不透明度的变化来实现所有匹配元素的淡入效果，动画完成后可选地触发一个回调函数 -
fadeOut()
通过不透明度的变化来实现所有匹配元素的淡出效果，动画完成后可选地触发一个回调函数 -
fadeTo()
将所有匹配元素的不透明度以渐进方式调整到指定的不透明度，动画完成后可选地触发一个回调函数 -
fadeToggle()
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，动画完成后可选地触发一个回调函数
jQuery的淡入淡出案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.demo{
width: 300px;
height: 300px;
background-color: greenyellow;
display: none;
margin-top: 10px;
}
</style>
</head>
<body>
<input type="button" class="fadeIn" value="淡入" />
<input type="button" class="fadeOut" value="淡出" />
<input type="button" class="fadeTo" value="渐进式淡入" />
<input type="button" class="fadeToggle" value="切换" />
<div class="demo"></div>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//fadeIn
$('.fadeIn').click(function() {
$('.demo').fadeIn(1000, 'swing')
})
//fadeOut
$('.fadeOut').click(function() {
$('.demo').fadeOut(1000, 'swing')
})
//fadeTo
$('.fadeTo').click(function() {
$('.demo').fadeTo(1000, 0.3,'swing')
})
//fadeToggle
$('.fadeToggle').click(function() {
$('.demo').fadeToggle(1000,'swing')
})
})
</script>
</body>
</html>
2308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
