<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery.min.js"></script>
<style type="text/css">
#divD{
width:300px;
height:100px;
background-color:#CC99FF;
position: absolute;

}
</style>
<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>
</head>
<body>
<input type="button" value="滑入" id="btnFadein" />
<input type="button" value="滑出" id="btnFadeout"/>
<div id="divD">这是div</div>
DIV
</body>
</html>

div层的滑入滑出实例的更多相关文章

  1. JQuery动画之滑入滑出动画

    1. 滑入动画(类似于商店的卷帘门) $(selector).slideDown(speed, 回调函数); 解释: 此语句实现的功能为, 在XX时间内, 下拉动画, 显现元素. 当 slideDow ...

  2. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  3. 【jquery隐藏、显示事件and提示callback】【淡入淡出fadeToggle】【滑入滑出slideToggle】【动画animate】【停止动画stop】

    1.jquery隐藏and显示事件 $("p").hide();      //隐藏事件$("p").hide(1000);  //1秒内缓慢隐藏$(" ...

  4. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  5. 伴随ListView、RecyclerView、ScrollView滚动滑入滑出小图标--第三方开源--FloatingActionButton

    FloatingActionButton在github上的项目主页是:https://github.com/makovkastar/FloatingActionButton 它的依赖包NineOldA ...

  6. WPF技术触屏上的应用系列（五）: 图片列表异步加载、手指进行缩小、放大、拖动 、惯性滑入滑出等效果

    原文:WPF技术触屏上的应用系列(五): 图片列表异步加载.手指进行缩小.放大.拖动 .惯性滑入滑出等效果 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统, ...

  7. jQuary总结7:动画操作,显示与隐藏 淡入淡出, 滑入滑出

    1 jquery提供了三组基本动画,这些动画都是标准的.有规律的效果,jquery还提供了自定义动画的功能. 2 显示与隐藏: show([speed],[easing],[callback]) 显示 ...

  8. js窗口边缘滑入滑出效果-初级代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ios 页面滑入滑出

    从左边滑进 CGRect r1,r2; r1 = app.testview.view.frame; r2 = self.view.frame; [app.testview.view setFrame: ...

随机推荐

  1. Python之Flask框架项目Demo入门

    Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...

  2. openssl编译安装

    最新版本可以在这个网站下载: https://www.openssl.org/source/ wget https://www.openssl.org/source/openssl-1.1.1c.ta ...

  3. lego loam 跑镭神32线激光雷达

    师弟反应镭神32线激光雷达(32C)录制的数据包不能跑lego loam,这里就总结一下. 首先lego loam默认的接受的topic name是velodyne_points,点云的frame_i ...

  4. Kubernetes 弹性伸缩全场景解析（三） - HPA 实践手册

    在上一篇文章中,给大家介绍和剖析了 HPA 的实现原理以及演进的思路与历程.本文我们将会为大家讲解如何使用 HPA 以及一些需要注意的细节. autoscaling/v1 实践 v1 的模板可能是大家 ...

  5. VSFTP日志文件详解

    开启FTP服务器记录上传下载的情况,如果启用该选项,系统将会维护记录服务器上传和下载情况的日志文件.默认情况下,该日志文件为 /var/log/vsftpd.log # This depends on ...

  6. C# 多线程处理List数据

    代码思路 将要处理的数据放到ConcurrentQueue中,然后开启多个线程去处理数据,处理完成后,再到队列中获取下一个待处理数据. ConcurrentQueue 表示线程安全的先进先出 (FIF ...

  7. C#和Java的对比

    C#和Java的对比 C#是微软公司在2000年6月发布的一种面向对象的高级程序设计语言:Java是Sun公司在1996年1月发布的一种面向对象的.平台独立的高级程序设计语言.它们是现在最流行的面向对 ...

  8. 解决U盘不能分配空间（windows下操作）

    亲测可行 1.WIN+R => cmd => diskpart命令进入工具. 2.使用LIST DISK查看所有磁盘,?提示所有命令. 3.SELECT DISK 1将磁盘聚焦到1号磁盘, ...

  9. PHP MySQLi 参考手册

    PHP MySQLi函数 PHP MySQLi是MySQL的增强版本,PHP7 已经废弃了MySQL扩展,全面推荐使用MySQLi或者PDO. MySQLi安装>>>>> ...

  10. Delphi Webbrowser使用方法详解

    1.webbroser介绍 该组件是一个浏览器组件,可以显示一个指定地址的网页.设置网页打开时的主页以及对网页进行相关的操作,同时也可以对HTML文件进行剪切.复制.粘贴.删除等操作.该 组件在Int ...