jQuery中如何实现淡入淡出效果
今天要分享的是如何通过jQuery来实现淡入淡出的效果，具有一定的参考作用，希望对大家有所帮助
【教程推荐：jQuery教程】
jQuery具有四种fade方法，分别是fadeIn()、fadeOut()、fadeToggle()、fadeTo()接下来在文章中将为大家具体介绍这几种方法如何实现淡入淡出效果
fadeIn()方法
主要用于淡入已隐藏的元素，它有两个参数分别为:
speed ：表示效果的时长，可取“slow" ,"fast”或者是自定义的时间值。它是可选参数
callback :表示淡入效果完成后所执行的函数名称
fadeOut() 方法
主要用于淡出可见元素，它的参数值与fadeIn的值一样
fadeToggle() 方法
这个方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果
fadeTo() 方法
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
fadeTo方法中除了包含speed和callback函数以外，还多了一个必需的 opacity 参数，目的在于将淡入淡出效果设置不透明度
实例分享:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#img{
width:300px;
height:200px;
position: absolute;
top:40px;
}
button{
position: absolute;
top:10px;
}
</style>
</head>
<body>
<script src="./jquery/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#img").fadeToggle(3000).fadeTo(0.5);
});
});
</script>
<button>点击</button>
<img src="./images/22.jpg" id="img">
</body>
</html>
效果图：
总结：以上就是本篇文章的全部内容了，希望通过这篇文章可以帮助大家学会如何通过jQuery来实现淡入淡出效果
注：本篇文章参考jQuery教程手册中的jQuery淡入淡出一节
以上就是jQuery中如何实现淡入淡出效果的详细内容，更多请关注其它相关文章！
上一篇： javascript怎么移除数组元素
下一篇： react如何引入css