<!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. 01 学习数据分析的python库

    网页爬取 1.requests 2.BeautifulSoup 3.Scrapy 科学计算与数据分析 1.scipy 2.numpy 3.pandas 机器学习和深度学习 1.Scikit-learn ...

  2. systemdump相关

    /vendor/sprd/open-source/tools/crashcat sysdump.core.* > dump.bincrash -m phys_base=0x80000000 du ...

  3. Gin实现依赖注入

    前言 依赖注入的好处和特点这里不讲述了,本篇文章主要介绍gin框架如何实现依赖注入,将项目解耦. 项目结构 ├── cmd 程序入口 ├── common 通用模块代码 ├── config 配置文件 ...

  4. Eureka注册中心的自我保护模式

    如果在Eureka Server的首页看到以下这段提示,则说明Eureka已经进入了保护模式. EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTAN ...

  5. Unreal Engine 4 系列教程 Part 10：制作简单FPS游戏

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  6. iframe嵌套页面中的跳转

    简单说一下场景. 假设有A.B.C和D四个JSP页面,D通过iframe嵌套在C中,C通过iframe嵌套在B中,B通过iframe嵌套在A中. 然后现在在D中编写JavaScript代码跳转页面. ...

  7. Vue.js安装及环境搭建

    Vue.js环境搭建-Windows版 步骤一:安装node.js 在搭建vue的开发环境之前,需要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者 ...

  8. sentry 9.1.1docker版onepremise过程记录

    sentry安装:https://github.com/getsentry/onpremise正确使用此文档安装步骤,安装版本9.1.1-onbuild,这个需要自改Dockerfile. 备注:构建 ...

  9. java架构之路-（JVM优化与原理）JVM的运行时内存模型

    还是我们上次的图,我们上次大概讲解了类加载子系统的执行过程,验证,准备,解析,初始化四个过程.还有我们的双亲委派机制. 我们这次来说一下运行时内存模型.上一段小代码. public class Mai ...

  10. .NET使用本地outlook客户端发送邮件

    1.添加Microsoft.Office.Interop.Outlook引用 2.封装发送邮件方法 using System; using System.Configuration; using Sy ...