文档章节

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

Rhymo-Wu
 Rhymo-Wu
发布于 06/25 08:32
字数 454
阅读 10
收藏 0
点赞 0
评论 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
博文 27
码字总数 9598
作品 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
8种Javascript过渡特效

看过很多后,本人觉得jQuery scrollable 在其中算很优秀的。 以下转自:http://paranimage.com/8-kinds-of-transition-effects-javascript/ 8种JavaScript 过渡特效 , 涵盖淡入淡出、翻转特...

晨曦之光
2012/03/09
0
0
一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网...

迷路的阿修罗
2010/12/30
0
1
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
分享10个帮助你实现超酷特效的jQuery插件

日期:2012-4-4 来源:GBin1.com 今天我们这篇文章中将推荐给大家10个超酷的jQuery插件帮助大家实现超酷的jQuery特效,绝对超过其它的普通jQuery插件。希望大家喜欢! 1. jQuery Lens Flare...

gbin1
2012/04/05
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jvm堆内存的划分结构和优化,垃圾回收详解(详细解答篇)

在JVM中堆空间划分如下图所示 上图中,刻画了Java程序运行时的堆空间,可以简述成如下2条 1.JVM中堆空间可以分成三个大区,新生代、老年代、永久代 2.新生代可以划分为三个区,Eden区,两个幸...

嘻哈开发者
12分钟前
0
0
CentOS 7.4 设置系统字符编码

1.语言变量LANG在 /etc/locale 文件中。 2.可以通过/ect/profile 来修改LC_TYPE 变量的值 添加如下代码 export LC_ALL="zh_CN.GBK" export LANG="zh_CN.GBK" 到profile文件中,变量的可以修改...

qimh
13分钟前
0
0
Kafka相关使用

安装前提,需要有jdk环境,还有zookeeper环境 zookeeper下载地址:https://www.apache.org/dyn/closer.cgi/zookeeper/ zookeeper安装参考:https://www.jianshu.com/p/f7037105db46 kafka的下......

朝如青丝暮成雪
14分钟前
0
0
CentOS7 解决无法使用tab自动补全 tab代码提示

一、前言 对于刚刚开始学习linux的新人来说,linux的一切都显着神秘,只能惊叹于大牛在Linux上行云流水的操作。今天介绍一下在linux中自动补全的功能。 对于新人来说,在不懂得技巧的情况下,...

ziluopao
20分钟前
0
0
redis安装

https://www.cnblogs.com/feijl/p/6879929.html

ghou-靠墙哭
20分钟前
0
0
Spring核心——注解自动装载

从配置上扩展 之前的文章介绍了Spring的IoC容器配置管理方面的详细内容,需要了解的可以从IoC容器的设计模式开始阅读。在介绍基于注解配置的配置之前我们再重复一下在之前提到的基本认识: ...

随风溜达的向日葵
23分钟前
1
0
ElasticSearch学习(8)—— SearchType

Elasticsearch有四种类型的SearchType 1、query and fetch 向索引的所有分片(shard)都发出查询请求,各分片返回的时候把元素文档(document)和计算后的排名信息一起返回。这种搜索方式是最...

叶枫啦啦
25分钟前
0
0
MYSQL备份工具-mysqldump

介绍 mysqldump 是文本备份还是二进制备份 它是文本备份,如果你打开备份文件你将看到所有的语句,可以用于重新创建表和对象。它也有 insert 语句来使用数据构成表。 语法 mysqldump 的语法是...

郭恩洲_OSC博客
26分钟前
0
0
我的第一个go web框架

使用了beego等go web开发框架之后,感觉各种不方便,尤其是在接收参数、和自定义输出的时候,各种难受,定义各种model,这不是找事情嘛??尤其是在角色权限控制的时候我也感觉力不从心。。。...

独坐苔痕但观罗敷
27分钟前
0
0
自动代码生成图形化工具

自动生成Spring代码 https://github.com/EliMirren/Spring-generator 自动生成Vertx https://gitee.com/duhua/vertx-generator...

奋斗的小牛
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部