jQuery动画效果-slideUp slideDown上下滑动示例代码


Posted in Javascript onAugust 28, 2013
[code] 
<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").hover(function(){ 
$("div.content").slideUp(3000); 
},function(){ 
$("div.content").slideDown(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>

[/code]
Javascript 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 #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
You might like
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
用python批量下载apk
2020/12/29 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js