文档章节

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

Rhymo-Wu
 Rhymo-Wu
发布于 06/25 08:32
字数 454
阅读 15
收藏 0

主要效果:

本文主要采用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))

 

© 著作权归作者所有

共有 人打赏支持
Rhymo-Wu
粉丝 5
博文 33
码字总数 10659
作品 0
桂林
前端工程师
私信 提问
20篇教你得到酷炫效果的JQuery教程

我们都喜爱jquery带来的梦幻效果。本之列举的教程标题不同,但它们都带有不同的酷炫视觉效果。跟着它们逐步重建你的设计,又或是将这些令人震憾的特效融入你的设计中。 Making a Beautiful H...

晨曦之光
2012/03/09
0
0
非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗
2015/11/09
0
0
【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu
06/18
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
jquery的一些用法 有用的用法。

AJAX 框架 用Asp.net ajax 还是 Jquery? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NETAJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery,众多的 $g...

雪中漫步
2010/03/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
46分钟前
1
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
48分钟前
1
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
55分钟前
3
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
3
0
聊聊storm trident batch的分流与聚合

序 本文主要研究一下storm trident batch的分流与聚合 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout) .p......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部