jQuery4

最新推荐文章于 2024-02-13 08:00:47 发布

cuckoo_杜鹃

最新推荐文章于 2024-02-13 08:00:47 发布

阅读量480

点赞数 1

分类专栏： Linux

本文链接：https://blog.csdn.net/A_Cute_boy/article/details/77132157

版权

Linux 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	/*测试fadeIn()方法*/
  $("#showfadeIn").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
	/*测试fadeOut()方法*/
 $("#showfadeOut").click(function(){
    $("#div4").fadeOut();
    $("#div5").fadeOut("slow");
    $("#div6").fadeOut(3000);
  });
	/*测试fadeToggle()方法*/
 $("#showfadeToggle").click(function(){
	 $("#div7").fadeToggle();
	 $("#div8").fadeToggle("slow");
	 $("#div9").fadeToggle(3000);
 });
	
 $("#showfadeTo").click(function(){
	 $("#div10").fadeTo("slow",0.15);
	 $("#div11").fadeTo("slow",0.4);
	 $("#div12").fadeTo("slow",0.7);
 });
});
</script>
</head>

<body>
<button id="showfadeIn">演示fadeIn()方法</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><br>

<button id="showfadeOut">演示fadeOut()方法</button>
<div id="div4" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div5" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div6" style="width:80px;height:80px;background-color:blue;"></div><br>
	
<button id="showfadeToggle">演示fadeToggle()方法</button>
<div id="div7" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div8" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div9" style="width:80px;height:80px;background-color:blue;"></div><br>
	
<button id="showfadeTo">演示fadeTo()方法</button>
<div id="div10" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div11" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div12" style="width:80px;height:80px;background-color:blue;"></div><br>
</body>
</html>

cuckoo_杜鹃

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery4

$(document).ready(function(){ /*测试fadeIn()方法*/ $("#showfadeIn").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); /*测试fadeOut()方法*/ $("#
复制链接

扫一扫