基于jquery实现的文字淡入淡出效果
这篇文章介绍了jquery实现的文字淡入淡出效果实例，有需要的朋友可以参考一下
复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档- www.jbxue.com</title>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js">
</script>
<script language="javascript">
$(document).ready(function(){
$("#btn1").toggle(function(){
$("p").fadeOut("slow");
},function(){
$("p").fadeIn("slow");
});
$("#btn2").toggle(function(){
$("p").fadeTo("slow",0.66);
},function(){
$("p").fadeTo("slow",0.66);
});
});
</script>
</head>
<body>
<p style="background:#3F3">this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
</p>
<input type="button" value="淡入/淡出" id="btn1">
</body>
<input type="button" value="淡入/淡出 效果 透明度0.66" id="btn2">
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档- www.jbxue.com</title>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js">
</script>
<script language="javascript">
$(document).ready(function(){
$("#btn1").toggle(function(){
$("p").fadeOut("slow");
},function(){
$("p").fadeIn("slow");
});
$("#btn2").toggle(function(){
$("p").fadeTo("slow",0.66);
},function(){
$("p").fadeTo("slow",0.66);
});
});
</script>
</head>
<body>
<p style="background:#3F3">this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
</p>
<input type="button" value="淡入/淡出" id="btn1">
</body>
<input type="button" value="淡入/淡出 效果 透明度0.66" id="btn2">
</html>
基于jquery实现的文字淡入淡出效果的更多相关文章
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- 【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
- JQuery显示，隐藏和淡入淡出效果
为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...
- jQuery-4.动画篇---淡入淡出效果
jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
- Javascript-- jQuery动画篇(淡入淡出效果)
淡入淡出效果 jQuery 提供了下面几种方法可以实现显示的淡入淡出效果: fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn()方法 fadeIn()实现 ...
- 淡入淡出效果的js原生实现
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
随机推荐
- epub、ocf等常用电子书格式浅析----附JAVA示例程序
一. 电子书介绍 转载请注明http://www.cnblogs.com/xckk/p/6020324.html Epub(Electronic Publication)是一个完全开放和免费的电子书标 ...
- jpcap 配置方法，问题解决，模拟sniffer程序。（附JAVA程序，jar，dll包等环境）
博文链接 http://www.cnblogs.com/xckk/p/4609444.html 一. Eclipse环境下安装与配置Jpcap 相关源程序.jpcap jar包,dll包,帮助文档 ...
- NAS、DAS和SAN三种存储究竟是什么？
首先,NAS(Network Attached Storage,网络附加存储)全面改进了以前低效的DAS存储方式,它是采用独立于PC服务器,单独为网络数据存储而开发的一种文件服务器. NAS服务器中集 ...
- 揭秘淘宝自主研发的文件系统：TFS
目前,国内自主研发的文件系统可谓凤毛麟角.淘宝在这一领域做了有效的探索和实践,Taobao File System(TFS)作为淘宝内部使用的分布式文件系统,针对海量小文件的随机读写访问性能做了特殊优 ...
- zend studio-字体大小设置
在使用zend studio的过程中为了方便我们编码,很多时候需要设置编码的字体的大小,设置步骤如下: 选择[Windows]-[preference]-[general]-[appearance]- ...
- C# - 系统类 - Array类
Array类 ns:System Array是一个抽象类 表示数组 提供了创建.查找.删除.排序.修改等应用于数组的操作 此类没有公有的实例构造函数 可以使用静态方法CreateInstance创建A ...
- Git使用完全解析（一）
是时候来系统的介绍一下Git了.毫无疑问,Git是目前最优秀的分布式版本控制工具,木有之一,可是我见到的很多人还是不会用,我的老东家每天忍受着SVN带来的痛苦,却迟迟不愿切换到Git上,个人感觉,许多 ...
- 玩转Android之加速度传感器的使用，模仿微信摇一摇
Android系统带的传感器有很多种,最常见的莫过于微信的摇一摇了,那么今天我们就来看看Anroid中传感器的使用,做一个类似于微信摇一摇的效果. OK ,废话不多说,我们就先来看看效果图吧: 当我摇 ...
- Java基础知识强化之IO流笔记36：InputStreamReader/OutputStreamWriter 复制文本文件案例
1. 需求:把当前项目目录下的a.txt内容复制到当前项目目录下的b.txt中. 数据源: a.txt -- 读取数据 -- 字符转换流 -- InputStreamReader 目的地: b.t ...
- CVPR 2013 录用论文【待更新】
完整录用论文官方链接:http://www.pamitc.org/cvpr13/program.php 过段时间CvPaper上面应该会有正文链接 今年有关RGB-D摄像机应用和研究的论文渐多起来了. ...