1.jQuery fadeIn() 用于淡入已隐藏的元素。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
// 1.淡入效果
$('button').eq(0).click( function(){
$('div').fadeIn(1200 , function(){
alert('淡入效果执行完毕')
}) ;
})
2.jQuery fadeOut() 方法用于淡出可见元素。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
// 1.淡出效果
$('button').eq(1).click( function(){
$('div').fadeOut(1200 , function(){
alert('淡入效果执行完毕')
}) ;
})
3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
// 3.淡出淡入效果切换
$('button').eq(2).click( function(){
$('div').fadeToggle(1200 , function(){
alert('切换执行完毕');
}) ;
})
4.jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件停止案例</title>
<style >
div{
width: 200px;height: 200px;
background-color: purple;
display: block;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换效果</button>
<button>修改透明度</button>
<div></div>
<!-- <script type="text/javascript"> -->
<script>
// 1.入口函数
$(function(){
// 1.淡入效果
$('button').eq(0).click( function(){
$('div').fadeIn(1200 , function(){
alert('淡入效果执行完毕')
}) ;
})
// 2.淡出效果
$('button').eq(1).click( function(){
$('div').fadeOut(1200 , function(){
alert('淡入效果执行完毕')
}) ;
})
// 3.淡出淡入效果切换
$('button').eq(2).click( function(){
$('div').fadeToggle(1200 , function(){
alert('切换执行完毕');
}) ;
})
// 4.修改透明度
$('button').eq(3).click( function(){
$('div').fadeTo(1200 , 0.5 , function(){
alert('透明执行完毕');
}) ;
})
})
</script>
</body>
</html>
