jQuery动画效果-fadeIn fadeOut淡入浅出示例代码


Posted in Javascript onAugust 28, 2013
<html> 
<head> 
<meta charset="utf-8"/> 
<style> 
*{ margin:0; padding:0;} 
body{font-size:15px;} 
#container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} 
.head{ background:#999; padding:5px; cursor:pointer;} 
.content{ text-indent:15px;} 
</style> 
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script> 
<script> 
$(function(){ 
$("h5.head").toggle(function(){ 
$("div.content").fadeOut(3000); 
},function(){ 
$("div.content").fadeIn(3000); 
}); 
}) 
</script> 
</head> 
<body> 
<div id="container"> 
<h5 class="head">什么是jQuery?</h5> 
<div class="content"> 
JQuery是继prototype原型之后又一个javascript库,他凭借简单的代码和完善的浏览器兼容性,再加上强大的DOM操作,完善的事件处理机制,强大的ajax操作,加大的简化了javascript开发人员的工作。 
</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
详谈javascript中的cookie
Jun 03 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 #Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 #Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 #Javascript
ExtJS DOM元素操作经验分享
Aug 28 #Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 #Javascript
在JavaScript中实现类的方式探讨
Aug 28 #Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 #Javascript
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
Prototype Class对象学习
2009/07/19 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python中偏函数partial用法实例分析
2015/07/08 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
环保建议书200字
2014/05/14 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
Python必备技巧之函数的使用详解
2022/04/04 Python
解决 redis 无法远程连接
2022/05/15 Redis