文档章节

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

Rhymo-Wu
 Rhymo-Wu
发布于 06/18 18:31
字数 838
阅读 14
收藏 2
点赞 0
评论 0

我是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
博文 27
码字总数 9598
作品 0
桂林
前端工程师
8种Javascript过渡特效

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

晨曦之光
2012/03/09
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
jQuery 跟随浏览器窗口的回到顶部按钮

上周花了点时间改了一下 Go Top 按钮的显示效果, 显示在页面右侧, 跟随浏览器窗口滚动, 在 IE6 浏览器中使用淡入淡出的跟随显示. 可能现在已经存在很多类似的插件和工具, 但我还是想分享一下...

christina_12345
2014/03/17
0
0
Jquery工作常用实例——淡入淡出功能实现

首先说下几个事件的用法: 1:$(selector).fadeOut(speed,callback)):淡出被选元素; 2:$(selector).fadeIn(speed,callback): 淡入被选元素; 3:$(selector).fadeTo(speed,opacity(亮度)...

Adam-Lee
2011/07/12
0
0
Jquery Slides1.1.8版本注释

图片轮播图的应用很广泛,jquery Slides是一个很好的插件,它兼容所有的浏览器,使用起来很方便。缺点就是需要依赖于jquery。根据个人的使用情况,对调用Slides的参数进行中文注释,希望对一...

anx
2012/08/09
0
0
Lazy Load, 延迟加载图片的 jQuery 插件

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正...

xiaoxin
2014/07/09
0
0
Jquery工作常用实例——回调函数的使用

当动画 100% 完成后,即调用 Callback 函数。如果我们没用callback而是直接用语句,那么有可能达不到我们想要的效果,比如我下面的一个实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

Adam-Lee
2011/07/12
0
0
jquery常用的插件1000收集

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

Alic
2011/03/07
0
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ConcurrentLinkedQueue源码分析

前言 ConcurrentLinkedQueue是一个线程安全的队列,它采用的是 CAS 算法来进行实现,也就是说它是非阻塞的;队列中的元素按照 FIFO(先进先出)的原则对元素进行排列,此外,它是一个无界队列;...

tsmyk0715
9分钟前
0
0
String,StringBuffer ,StringBuilder的区别

不同点 一、基类不同 StringBuffer、StringBuilder 都继承自AbStractStringBuilder,String 直接继承自 Object 2、底层容器“不同” 虽然底层都是字符数组,但是String的是final修饰的不可变...

不开心的时候不要学习
20分钟前
0
0
nodejs 文件操作

写文件code // 加载文件模块var fs = require("fs");var content = 'Hello World, 你好世界!';//params 文件名,内容,编码,回调fs.writeFile('./hello.txt',content,'utf8',function (er......

yanhl
22分钟前
0
0
SpringBoot mybits 查询为0条数据 但是在Navicat 中可以查询到数据

1.页面请求: 数据库查询: 2018-07-16 17:56:25.054 DEBUG 17312 --- [nio-9010-exec-3] c.s.h.m.C.selectSelective : ==> Preparing: select id, card_number, customer_id, customer_nam......

kuchawyz
32分钟前
0
0
译:Self-Modifying cod 和cacheflush

date: 2014-11-26 09:53 翻译自: http://community.arm.com/groups/processors/blog/2010/02/17/caches-and-self-modifying-code Cache处在CPU核心与内存存储器之间,它给我们的感觉是,它具......

我叫半桶水
35分钟前
0
0
Artificial Intelligence Yourself

TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理。Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,TensorFlow为张量从流...

孟飞阳
47分钟前
0
0
press.one个人数字签名

这是我在press.one的数字签名 https://press.one/p/address/v?s=9d3d5b7ce019af357ab994775549e8f047a5b17fc9893364652fc67e4b95443b38ccb24c6655e0d252dd0154369eb9b7717c4ccf4e1835ca3596......

NateHuang
50分钟前
1
0
Oracle 中的 SQL 分页查询原理和方法详解

本文分析并介绍 Oracle 中的分页查找的方法。 Oracle 中的表,除了我们建表时设计的各个字段,其实还有两个字段(此处只介绍2个),分别是 ROWID(行标示符)和 ROWNUM(行号),即使我们使用...

举个_栗子
56分钟前
2
2
C++ iostream、iomanip 头文件详解

大家好,我是ChungZH!这是我的第二篇博客。在这篇博客中,我将介绍一些有关C++的iostream和iomanip库的知识,希望大家喜欢! 首先,我们来看看iostream。 相信大家都知道iostream,这个库可以...

ChungZH
今天
1
0
atom的摸索

atom中使用git 软件有提示,不赘述(软件的特色) 提供的只是些基础功能,我们需要伟大的开源伙伴来解决易用性问题 ,安装git plus插件,你就可以不用cli也可以在atom中畅快的使用git了 因为这玩意...

狮子狗
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部