jQuery效果 - 淡入和淡出

最新推荐文章于 2025-03-28 20:14:11 发布

AllenWalker1936

最新推荐文章于 2025-03-28 20:14:11 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery jQuery效果

本文链接：https://blog.youkuaiyun.com/AllenWalker1936/article/details/88868504

jQuery 同时被 2 个专栏收录

14 篇文章

订阅专栏

jQuery效果

7 篇文章

订阅专栏

本文详细介绍了jQuery中实现元素淡入、淡出效果的方法，包括fadeIn()、fadeOut()、fadeToggle()和fadeTo()，并提供了相应的语法和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery效果 - 淡入和淡出

方法

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

语法

$(selector).fadeIn(speed,callback);//淡入
$(selector).fadeOut(speed,callback);//淡出
$(selector).fadeToggle(speed,callback);//切换
$(selector).fadeTo(speed,opacity,callback);//淡入或淡出（透明度变化）到某种程度

代码

<!doctype html>
<html>
 <head>
  <title>jq淡入和淡出</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#fadein").click(function(){
				$("div").fadeIn();
			});
			$("#fadeout").click(function(){
				$("div").fadeOut();
			});
			$("#fadetoggle").click(function(){
				$("div").fadeToggle();
			});
			$("#fadeto").click(function(){
				$("div").fadeTo("slow",0.1);
			});
		});
	</script>
 </head>
 <body>
	<input type="button" id="fadein" value="淡入" "">
	<input type="button" id="fadeout" value="淡出" "">
	<input type="button" id="fadetoggle" value="切换" "">
	<input type="button" id="fadeto" value="淡入/淡出至10%透明度" "">
	<div id="div1" class="" style="width:100px;height:100px;display:none;background-color:red"></div>
	<div id="div2" class="" style="width:100px;height:100px;display:none;background-color:green"></div>
	<div id="div3" class="" style="width:100px;height:100px;display:none;background-color:blue"></div>
 </body>
</html>