基于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 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
随机推荐
- [微信小程序] 终于可以愉快的使用 async/await 啦
[小程序] 终于可以愉快的使用 async/await 啦 这篇文章主要是想说一下 怎么在微信小程序中使用async/await从而逃离回调地狱 背景 最近一直在搞微信小程序 用的语言是TypeScr ...
- ASP.Net Core简介
定义:一个经过精简的.模块化的.NET Framework子集,目的是为了跨平台..NET Core的类库叫做“CoreFX”,更精简的版本叫做“CoreCLR”. ASP.NET Core 是微软的 ...
- nginx安装php和php-fpm
最近在学习nginx,看了好多帖子终于安装成功了. 经验,首先不要用yum安装,安装完以后根本找不到安装目录在哪里呀,然后安装失败以后会很不方便. 最终选择了自己编译安装. 看了好多帖子都不行,终于找 ...
- android101 获取、备份、插入短信
package com.itheima.getsms; import java.io.File; import java.io.FileNotFoundException; import java.i ...
- linux启动的过程
总结一下,linux的开机整个流程. · 1: 启动电源后,主机第一步先做的就是查询BIOS(全称:basic input/output system 基本输入输出系统)信息.了解整个系统的硬件状态, ...
- overflow: hidden用法，不仅仅是隐藏溢出
overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <!DOCTYPE html> <html ...
- 线程间操作无效 progressBar2线程不能被访问
出现这个问题解决的方法有两种第一种就是使用 // Form1.CheckForIllegalCrossThreadCalls = false;//不对跨线程的调用 使用这个的时候是判断线程是否运行正常 ...
- 推荐几个对Asp.Net开发者比较实用的工具
推荐几个对Asp.Net开发者比较实用的工具.大家有相关工具也可以在评论区留言,一起努力学习. 工具 1.Visual stdio Productivity Power tool:visual std ...
- Unity3D 之NGUI各种脚本及应用
这里来介绍一下NGUI的各种脚本的作用,以便以后需要某种效果的时候,去添加相应的脚本去实现效果 UIButton --> 按钮脚本 UIPanel --> 面板脚本 UIToggle ...
- （转）Asp.NetURL重写的一种方法
说到不用设置iis,主要是为了实现在虚拟主机或是拿不到iis操作限的时候,不能添加isap又想实现类似于静态化的程序实现方式,先声明,这里最终要实现的效果是,最终可以用 12345.html 替换 s ...