jQuery的显示，隐藏，淡化，淡出

最新推荐文章于 2022-11-14 18:23:36 发布

李丨少

最新推荐文章于 2022-11-14 18:23:36 发布

阅读量317

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/u013313232/article/details/109547172

版权

jQuery的显示，隐藏，淡化，淡出

//显示   show()
	//显示   show()
	//切换   toggle()
	//淡入   fadeIn()
	//淡出  fadeOut()
	//淡化到  fadeTo()
	//淡化切换  fadeToggle()

		$(function(){
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show();
				
			});		
			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide();
				
			});	
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").toggle();
				
			});	
			
			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn();
				
			});	
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(1000);
				
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo(1000,0.5);
				
			});	
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle();
				
			});	
		})
</script>
	
	</head>
	<body>
		<table style="float: left;">
			<tr>
				<td><button id="btn1">显示show()</button></td>
			</tr>
			<tr>
				<td><button id="btn2">隐藏hide()</button></td>
			</tr>
			<tr>
				<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
			</tr>
			<tr>
				<td><button id="btn4">淡入fadeIn()</button></td>
			</tr>
			<tr>
				<td><button id="btn5">淡出fadeOut()</button></td>
			</tr>
			<tr>
				<td><button id="btn6">淡化到fadeTo()</button></td>
			</tr>
			<tr>
				<td><button id="btn7">淡化切换fadeToggle()</button></td>
			</tr>
		</table>
		
		<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
			jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
		</div>
	</body>

</html>

```以下，1000为1000毫秒。后面可以写成函数。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201107150119301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzMTMyMzI=,size_16,color_FFFFFF,t_70#pic_center)
效果如下

会有弹窗
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201107150235612.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzMTMyMzI=,size_16,color_FFFFFF,t_70#pic_center)

李丨少

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery的显示，隐藏，淡化，淡出

jQuery的显示，隐藏，淡化，淡出//显示 show() //显示 show() //切换 toggle() //淡入 fadeIn() //淡出 fadeOut() //淡化到 fadeTo() //淡化切换 fadeToggle() $(function(){ //显示 show() $("#btn1").click(function(){ $("#div1").show(); }); //隐藏 hide.
复制链接

扫一扫