文档章节

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

Rhymo-Wu
 Rhymo-Wu
发布于 06/18 18:31
字数 838
阅读 26
收藏 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
码字总数 10659
作品 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
jquery插件开发所需要的方法

1、$.fn是jquery的定义的一个特别名称,可以通过这样来定义一个方法: $.fn.test=function(otherString){ }; $.fn是指jquery的命名空间,加上fn上的方法及属性,会对每一个jquery实例有效。 ...

昙花一现
01/17
0
0
炫酷实用 7款jQuery/HTML5图片应用

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

老鸟的空间
2014/07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JeeSite 4.x 树形结构的表设计和用法

有些同仁对于 JeeSite 4 中的树表设计不太了解,本应简单的方法就可实现,却写了很多复杂的语句和代码,所以有了这篇文章。 在 JeeSite 4 中的树表设计我还是相对满意的,这种设计比较容易理...

ThinkGem
16分钟前
10
0
0022-如何永久删除Kafka的Topic

1.问题描述 使用kafka-topics --delete命令删除topic时并没有真正的删除,而是把topic标记为:“marked for deletion”,导致重新创建相同名称的Topic时报错“already exists”。 2.问题复现...

Hadoop实操
18分钟前
0
0
技术工坊|区块链中的p2p网络(上海)

区块链是一个去中心化的系统,每个节点分布在全球各地,那么节点之间是如何自发地组成网络,又如何进行通信的?区块链中的p2p网络算法与bt下载中的p2p网络有什么区别?11月28日,第29期技术工...

HiBlock
24分钟前
1
0
MySQL性能优化之char、varchar、text的区别

在存储字符串时, 可以使用char、varchar或者text类型, 那么具体使用场景呢? 参考下面这个表结构: 1、 char长度固定, 即每条数据占用等长字节空间;适合用在身份证号码、手机号码等定。 ...

hansonwong
26分钟前
0
0
并发编程系列:4大并发工具类的功能、原理、以及应用场景

一:并发工具包 1.并发工具类 提供了比synchronized更加高级的各种同步结构:包括CountDownLatch、CyclicBarrier、Semaphore等,可以实现更加丰富的多线程操作。 2.并发容器 提供各种线程安全...

游人未归
36分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部