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 EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
JS document form表单元素操作完整示例
Jan 13 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
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
php数据序列化测试实例详解
2017/08/12 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
关于numpy数组轴的使用详解
2019/12/05 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
介绍一下grep命令的使用
2015/06/12 面试题
信息部岗位职责
2013/11/12 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
抄作业检讨书
2014/02/17 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
活动经费申请报告
2015/05/15 职场文书
运动会班级前导词
2015/07/20 职场文书
新党员入党决心书
2015/09/22 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书