文档章节

【每天一个JQuery特效】淡入淡出显示或隐藏窗口(1)

Rhymo-Wu
 Rhymo-Wu
发布于 06/18 18:31
字数 838
阅读 21
收藏 2

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。

本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元素。具体效果如下图:

主要代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>day 01 以淡入淡出的效果显示或隐藏元素</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//对单击"淡入显示百度窗口"按钮的响应
				$("#myfadein").click(function(){
					$('IFrame').fadeIn('slow');
				});
				//对单击"淡出隐藏百度窗口"按钮的响应
				$("#myfadeout").click(function(){
					$('IFrame').fadeOut('slow');
				});
			});
		</script>
	</head>
	<body>
		<p style="text-align: center;margin-top:15px;">
			<input type="button" class="input" name="" id="myfadein" value="淡入显示百度窗口" style="width: 190px;"/>
			<input type="button" class="input" name="" id="myfadeout" value="淡出隐藏百度窗口" style="width: 190px;"/>
		</p>
		<p style="text-align: center;margin-top: 5px;">
			<iframe src="https://www.baidu.com" width="800" height="300" style="border: 1px solid gray;"></iframe>
			
		</p>
	</body>
</html>

在代码中,fadeIn()方法用于以淡入效果显示已隐藏的元素,该方法的语法声明如下:

$(selector).fadeIn(speed,callback);

其中,参数speed是一个可选参数,它可以取slow,fast或毫秒值。参数callback也是一个可选参数,表示动作完成后所执行的方法名称。

fadeOut()方法用于以淡出效果隐藏当前的可见元素,该方法的语法声明如下:

$(selector).fadeOut(speed,callback);

备注:

jQuery 语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。

jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法:

$(selector).action()

美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏所有 id="test" 的元素

你对 CSS 选择器熟悉吗?

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。

文档就绪事件
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

试图隐藏一个不存在的元素
获得未完全加载的图像的大小
提示:简洁写法(与以上写法效果相同):

$(function(){
 
   // 开始写 jQuery 代码...
 
});

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

© 著作权归作者所有

共有 人打赏支持
Rhymo-Wu
粉丝 5
博文 33
码字总数 10356
作品 0
桂林
前端工程师
8种Javascript过渡特效

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

晨曦之光
2012/03/09
0
0
jquery自带的已定义动画函数

我们的网页如果一直是那种静态不动的,就显得有点太安静了。所以,我们一般会在页面上添加一些动画动态效果,让页面更加的丰富,如:选项卡、幻灯片、轮播图等等,这些动画我们都可以通过jqu...

hero2019
08/08
0
0
jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge
05/19
0
0
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0
jQuery常用知识点总结以及平时封装常用函数

jquery效果 隐藏/显示: 淡入/淡出: 滑动:slideDown/slideUp(speed,callback) 动画: jQuery DOM 获取文本值、属性值: js代码: 设置文本属性值: js代码: 添加元素: 删除元素: 查找元...

heartless01
2017/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

讲述下 :LVM逻辑卷管理遇到的问题

LVM学习逻辑卷管理创建逻辑卷遇到的问题 1 实验环境 系统 内核 发行版本 CentOS 2.6.32-754.2.1.el6.x86_64 CentOS release 6.10 (Final) 由于是最小化安装没有xfs命令,yum安装如下包支持此...

linuxprobe16
38分钟前
0
0
day95-20180922-英语流利阅读-待学习

Hey Jude 半个世纪传唱不衰的背后故事 毛西 2018-09-22 1.今日导读 2004 年,The Beatles 被《滚石》杂志选为“历史上最伟大的 50 位流行音乐家的第一位”。这四名来自英国利物浦的男孩不仅对...

飞鱼说编程
45分钟前
1
0
OSChina 周六乱弹 —— 放假前期焦虑症晚期

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享Matteo的单曲《Panama》: 《Panama》- Matteo 手机党少年们想听歌,请使劲儿戳(这里) @新垣吉衣OSC :我发现只要去有小朋友...

小小编辑
今天
163
9
wait()被notify()后,接着执行wait()后面的语句

wait()被notify()后,接着执行wait()后面的语句

noteman
今天
1
0
Ubuntu集群-使用MAAS开始裸机安装

Ubuntu使用MAAS装机的七个步骤。 1、Setup your hardware You need one small server for MAAS and at least one server which can be managed with a BMC. It is recommended to have the M......

openthings
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部