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 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
jQuery实现跨域
Feb 03 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
Vue的props父传子的示例代码
May 20 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
js实现微信聊天界面
Aug 09 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
php实例化一个类的具体方法
2019/09/19 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Python yield 使用方法浅析
2017/05/20 Python
python样条插值的实现代码
2018/12/17 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
好的旅游活动方案
2014/08/19 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
九一八事变演讲稿
2014/09/05 职场文书
四年级学生期末评语
2014/12/26 职场文书
团结友爱主题班会
2015/08/13 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
python 安全地删除列表元素的方法
2022/03/16 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL