Jquery 滑入滑出效果实现代码


Posted in Javascript onMarch 27, 2010

CSS

<style type="text/css"> 
#divD{ 
width:300px; 
height:100px; 
background-color:#CC99FF; 
} 
</style>

Jquery代码
<script type="text/javascript" src="bg/js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#btnFadein").bind("click",Fadein); //为btnFadein绑定click时间 
$("#btnFadeout").bind("click",Fadeout); //为btnFadeout绑定click时间 
}) function Fadein(){ 
$("#divD").slideDown("slow"); //滑入 
} 
function Fadeout(){ 
$("#divD").slideUp("slow"); //滑出 
} 
</script>

HTML
<body> 
<input type="button" value="滑入" id="btnFadein" /> 
<input type="button" value="滑出" id="btnFadeout"/> 
<div id="divD">这是div</div> 
DIV 
</body>

O(∩_∩)O每天进步一点点O(∩_∩)O 该BLOG供个人记录学习笔记,如有错误欢迎指出!
Javascript 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 #Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 #Javascript
Javascript 函数中的参数使用分析
Mar 27 #Javascript
js几个验证函数代码
Mar 25 #Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 #Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 #Javascript
JavaScript 学习初步 入门教程
Mar 25 #Javascript
You might like
php实现水仙花数的4个示例分享
2014/04/08 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python使用cPickle模块序列化实例
2014/09/25 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
如何理解python对象
2020/06/21 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
请病假条范文
2015/08/17 职场文书
解析目标检测之IoU
2021/06/26 Python
Django中session进行权限管理的使用
2021/07/09 Python