JQuery---动态效果

最新推荐文章于 2023-08-10 16:36:12 发布

危笑qwq

最新推荐文章于 2023-08-10 16:36:12 发布

阅读量98

点赞数

分类专栏： jQuery javascript

本文链接：https://blog.csdn.net/qw160/article/details/115550748

版权

javascript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

jQuery

9 篇文章 0 订阅

订阅专栏

显示/隐藏

hide后面的参数是动态消失速度

  $("#test2").mouseenter(function(){
				  $("#test1").hide(1000);
			  });

动态隐藏出现完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
			 // $("button").click(function(){
			  //  $("p").hide();
			 // });
			  $("#test2").mouseenter(function(){
				  $("#test1").hide(2000);
			  });
			  $("#test3").click(function(){
			  				  $("#test1").show(2000);
			  });
			});
		</script>	
		
	</head>
	<body>
	<h2>这是一个标题</h2>
	<p>这是一个段落。</p>
	<p>这是另一个段落。</p>
	<div id="test1">这是一个盒子</div>
		

	<button>点我</button>
<button id="test2">点我隐藏盒子</button>
<button id="test3">点我显示盒子</button>
	</body>
</html>

淡入淡出

选择器.fadeOut//出
选择器.fadeIn、、入
$("#div2").fadeToggle("slow");//自动识别淡入还是淡出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
		
			$(document).ready(function(){
				$("#but1").click(function(){
					$("#div2").fadeOut("slow");
				});
				$("#but2").click(function(){
					$("#div2").fadeIn("slow");
				});
			});
		</script>	
	</head>
	<body>
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
		<button type="button" id="but1">点击淡出</button>
		<button type="button" id="but2">点击淡入</button>
	</body>
</html>

上滑下滑

$("#but4").click(function(){
					$("#div2").slideUp();
				});
				$("#but5").click(function(){
					$("#div2").slideDown();
				});

自动识别上滑下滑

 $("").slideToggle();

危笑qwq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery---动态效果

显示/隐藏hide后面的参数是动态消失速度 $("#test2").mouseenter(function(){ $("#test1").hide(1000); });动态隐藏出现完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.sta
复制链接

扫一扫

专栏目录