基于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 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
随机推荐
- Moq4在.NET3.5和.NET4版本之间的差异
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Moq4在.NET3.5和.NET4版本之间的差异.
- iOS CoreData(2)
上面一篇文章介绍了coredata的有关基本概念,由于大部分是参考别人文章中的内容,所以感觉有点虚,而且估计也是比较难以理解,下面这篇文章通俗一点说说学习coredata后的一些理解,然后给出一个简单 ...
- 自己动手写缓存Version1
实现一个最简单最主要的缓存系统. using System; using System.Data; using System.Configuration; using System.Web; usin ...
- OpenWRT加入 crontab开机默认运行
[转载请注明出处:钱国正专栏 http://blog.csdn.net/qianguozheng/article/details/37666829] OpenWRT系统默认已经加入了crond,仅仅是 ...
- JVM专题
http://blog.csdn.net/ITer_ZC/article/category/2758863
- stack例子
栈使用在括号匹配中的例子 程序如下: #include<stack> #include<iostream> using namespace std; int main() { ...
- android 沉浸通知栏
IOS的沉浸式通知栏很高大上,通知栏和app统一颜色或样式,很美观.android上面也早就人实现这种效果了. 我在这边也写一个实现通知栏沉浸式的方法,目前只实现了相同颜色. 先要改布局文件xml & ...
- linux find命令详解--转
转自:http://blog.csdn.net/jakee304/article/details/1792830 (一)Get Start 最简单的find用法莫过于如此: $ find . 查找当前 ...
- Linux查看磁盘块大小
首先,使用df命令查看所在磁盘 df -hT 显示: Filesystem Type Size Used Avail Use% Mounted on /dev/vda1 ext4 15G .1G 12 ...
- CentOS7下用jdk1.7编译hadoop-2.7.1全过程详解
说实话,本人编译hadoop的过程比较曲折,但收获也很多,下面系统介绍一下CentOS7下编译hadoop-2.7.1的全过程吧. 先说明,32位Linux操作系统可以直接下载编译好的hadoop使用 ...