jQuery 常用方法2(持续更新)

5.fadeIn()  fadeOut()  fadeToggle()  fadeTo()

fadeIn():用于淡入已隐藏的元素。

fadeOut( ) :方法用于淡出可见元素。

fadeToggle( ) :方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

fadeTo( ) :方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

重点:在搞这几个方法时,我想到了另一对方法hide()show()。hide隐藏起来的内容能否被“淡入”,被“淡出”的内容能否被“淡入”。为了方便,我拿fadeToggle方法和show,hide进行试验。发现,他们之间能相互作用!这个发现让我有点小兴奋,附上试验代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-2.2.1.min.js"></script>
	<script type="text/javascript">
	$(function()
	{
		$(".btn1").click(function()
		{
			$(".test").hide("slow");
		});

		$(".btn2").click(function(){
			$(".test").fadeToggle("slow");
		});

		$(".btn3").click(function(){
			$(".test").show("slow");
		})
	});
	</script>

</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a para</p>
<p>This is another</p>
<button type="button" class="btn1">Click me to hide</button>
<button type="button" class="btn3">Click me to show</button>
<button type="button" class="btn2">fadeToggle </button>

</body>
</html>

  

时间: 2024-11-10 14:02:11

jQuery 常用方法2(持续更新)的相关文章

JQ/Js常用方法汇总-持续更新

1:定时运行脚本方法 1:定时运行脚本方法//每秒运行一次 setInterval(function() { console.info(1);//要执行的内容 }, 1000);

动态加载页面数据的小工具 javascript + jQuery (持续更新)

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)注: 该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量. 使用方式: 首先,添加控件引用,并加入Jquery支持 <script src="js/jquery.js"></script&g

vue项目常用方法封装,持续更新中。。。

vue项目中可以直接使用 1.常用工具类untils.js中 /* * 验证手机号是否合格 * true--说明合格 */ export function isPhone(phoneStr){ let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (!myreg.test(phoneStr)) { return false; } else { return true; } } /* * 验证身份证号是否合格 * true--说明合格 */ export fun

【持续更新】JavaScript常见面试题整理

[重点提前说]这篇博客里的问题涉及到了JS中常见的的基础知识点,也是面试中常见的一些问题,建议初入职场的园友Mark收藏,本文会持续更新~ 1. 引入JS的三种方式 1.在HTML标签中直接使用,直接内嵌JS(但是不提倡使用): >>>不符合W3C关于内容和行为分离的要求: 2.在HTML页面中使用<scrip> </script>标签包裹JS代码: >>>script标签可以放到页面的各种位置: 3.引入外部的JS文件使用<script&

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(1)-前言与目录(持续更新中...)

演示地址 帐号:admin 密码:admin123 请不要删除用户避免他人无法体验(文章中已经附带源码,源码开放到17讲下载) 快捷地址(QQ群37509873也有相应的下载):   第2讲源码下载  密码:wg0i 最新代码生成器+17讲源码下载 密码:n2ji SwfUpload在MVC4下多文件上传 密码:0ntz 也可以有偿获取一份最新源码联系QQ:729994997价格500 -------------------------------------------------------

android点滴之触控相关知识点(持续更新)

1.检查当前屏幕有多少个触摸点. 使用MotionEvent的getPointerCount()方法. 2.多点触控下,触摸的状态的检测 MotionEvent类中方法getActionMasked(),这个方法可以检查触摸的状态: 当只有一个触摸点时(只用一根手指触摸屏幕),按下是0,起来是1,移动是2: 当触摸点多于1时(多根手指触摸屏幕),按下是5,起来是6,移动是2: 3.多点触控下,每个触点的分类处理 多点触摸时 假如是第i个点 int x = event.getX(i); int y

个人网盘2T资料整理分享(持续更新中)

一.       学习书籍下载 1.      数据库与数据结构数据  链接:  http://pan.baidu.com/s/1c094nSG  密码:13el 2.      汇编语言书籍          链接:  http://pan.baidu.com/s/1o63Kke2 密码:8udr 3.      Office书籍             链接:   http://pan.baidu.com/s/1hqgVNVI密码:m54m 4.      PHP书籍            

【 js 基础 】【 源码学习 】源码设计 (持续更新)

学习源码,除了学习对一些方法的更加聪明的代码实现,同时也要学习源码的设计,把握整体的架构.(推荐对源码有一定熟悉了之后,再看这篇文章) 目录结构:第一部分:zepto 设计分析第二部分:underscore 设计分析 第一部分: zepto 设计分析zepto 是一个轻量级的 Javascript 库.相对于 jquery 来说在 size 上更加小,主要是定位于移动设备.它是非常好的学习源码的入门级 javascript 库.这里重点说一下,这个库的设计,而对于详细的源码学习大家可以 star

JS函数集锦 持续更新..

//1.打开窗口function WinOpen(url, heightV, widthV) { var iTop2 = (window.screen.availHeight - 20 - heightV) / 2; var iLeft2 = (window.screen.availWidth - 10 - widthV) / 2; var params = 'menubar:no;dialogHeight=' + heightV + ';dialogWidth=' + widthV + ';d

前端面试题总结——Html5(持续更新中)

前端面试题总结--H5(持续更新中) 1.HTML5 为什么只需要写 <!DOCTYPE HTML>? HTML5 需要doctype来规范浏览器的行为,让浏览器按照它们应该的方式来运行:HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型. 2.HTML5的form如何关闭自动完成功能? 给不想要提示的 form 或某个 input 设置为 autocomplete=off. 3.HTML5 中如何嵌入音频? 当前,audio 元素支持三种音频格式:&l