图片收起与展开的动画效果（显示隐藏动画效果）

最新推荐文章于 2023-09-03 08:30:06 发布

置顶聆听HJ

最新推荐文章于 2023-09-03 08:30:06 发布

阅读量2k

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_41542329/article/details/103068151

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery用到的方法：
show()：如果被选元素已被隐藏，则显示这些元素。
注意：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
hide()：如果被选的元素已被显示，则隐藏该元素。
注意：我们用到了jQuery的show()和hide()方法需要引入jQuery相关的js。（如下图引入那个都可以）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery01</title>
<style type="text/css">
	div{
		height:200px;
		width:300px;
		margin-top:10px;
		margin-bottom: 10px;
		background-image:  url(/3DT/img/jb.png);
		display: none; 
	}

</style>

<script type="text/javascript" src="/3DT/js/jquery-2.1.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	 
		  $("#but1").click(function(){
			 $("div").show(2000);		  
		  })
		  
		  $("#but2").click(function(){
			  //$("div").text("内容是：8888");	
			  $("div").hide(2000);
		  })
	 
	});

</script>
</head>
<body>
<input type="button" value="图片显示" id="but1">
<input type="button" value="图片收起" id="but2">

<div></div>
<div></div>
<div></div>
</body>
</html>

效果图：

点击“图片显示”

点击"图片收起"

聆听HJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片收起与展开的动画效果（显示隐藏动画效果）

jQuery用到的方法：show()：如果被选元素已被隐藏，则显示这些元素。注意：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。hide()：如果被选的元素已被显示，则隐藏该元素。注意：我们用到了jQuery的show()和hide()方法需要引入jQuery相关的js。（如下...
复制链接

扫一扫