【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素-优快云博客

主要效果：

本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。

主要代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>根据状态确定是否滑入或滑出被选元素</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//对单击"收缩百度窗口"按钮的响应
				$("button").click(function(){
					//以展开或收缩的方式显示或隐藏元素
					$("#IFrame").slideToggle();
					if($("button").html() == "收缩百度窗口"){
						$("button").html("展开百度窗口");
					}else{
						$("button").html("收缩百度窗口");
					}
				});
			});
		</script>
	</head>
	<body>
		<p style="text-align: center;margin-top: 15px;">
			<button>收缩百度窗口</button>
		</p>
		<p style="text-align: center;margin-top: 5px;">
			<iframe id="IFrame" src="https://www.baidu.com" width="400" height="150" style="border:2px slid gray;"></iframe>
		</p>
	</body>
</html>

slideToggle()方法通过使用高度变化的滑动效果来切换元素的可见状态，如果被选元素是可见的，则隐藏，反之亦然。语法声明如下：

$(selector).slideToggle(speed,callback)

html() 方法设置或返回被选元素的内容（innerHTML）。当该方法用于返回内容时，则返回第一个匹配元素的内容。当该方法用于设置内容时，则重写所有匹配元素的内容。提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。

语法
返回内容：

$(selector).html()

设置内容：

$(selector).html(content)

使用函数设置内容：

$(selector).html(function(index,currentcontent))

转载于:https://my.oschina.net/rhymo/blog/1834904