<!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. Paper | D3: Deep Dual-Domain Based Fast Restoration of JPEG-Compressed Images

    目录 摘要 读后感 故事 深度双域法(D3) 发表于2016年CVPR. 摘要 既利用了CNN,又考虑了JPEG压缩的特性,解决JPEG图像去失真问题. 针对于压缩特性,作者考虑了JPEG压缩方案的先 ...

  2. js将内容复制到剪贴板

    有一需求,点击按钮要将某个值复制到剪贴板. 第一种,代码如下: <div cols="20" id="biao1">12345678</div ...

  3. Debug 路漫漫-12：Python: ValueError: 'userid' is both an index level and a column label, which is ambiguous.

    啊,又遇到难题了 == 想要对两个 dataframe 做自然连接 merge,连接的key 为 “userid”,但是报错:ValueError: 'userid' is both an index ...

  4. Algorithm： Permutation & Combination

    组合计数 组合数学主要是研究一组离散对象满足一定条件的安排的存在性.构造及计数问题.计数理论是狭义组合数学中最基本的一个研究方向,主要研究的是满足一定条件的排列组合及计数问题.组合计数包含计数原理.计 ...

  5. springboot2使用外部的tomcat服务器创建项目步骤

    使用内置的Servlet容器.应用打成可执行的jar.外置的Servlet容器:外面安装Tomcat---应用war包的方式打包: a).必须创建一个war项目:(利用idea创建好目录结构) b). ...

  6. .NET 跨域问题解决

    后端处理:var callback=context.Request.QueryString["callback"].ToString(); context.Response.Wri ...

  7. Eureka自我保护机制源码解析

    默认情况下,当EurekaServer在一定时间内(默认90秒)没有接收到某个客户端实例的心跳,EurekaServer将会注销该实例.但是当网络分区故障发生时,客户端与EurekaServer之间无 ...

  8. QT4.8.7和VS2010环境搭建及使用

    (一)环境搭建 首先下载QT4.8.7的安装包.QT Addin 1.11插件和VS2010安装包.第一步:安装好VS2010第二步:安装QT4.8.7(qt-opensource-windows-x ...

  9. shell脚本实现自动化安装linux版本的loadrunner agent(centos6.8)

    #!/bin/bash #Centos6下安装LoadRunner负载机 #@author Agoly #@date #@source 高级测试技术交流圈: yum -y install expect ...

  10. jQuery中的index用法与inArray用法

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