Jquery 滑入滑出效果实现代码


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供个人记录学习笔记,如有错误欢迎指出!



相关阅读:
XHTML标签写法应注意的问题
.net中关于时间的函数与应用
SQLServer2000中的触发器使用
PHP 增加了对 .ZIP 文件的读取功能
存储经验:Exchange服务器的备份与保护说明
比较Request获取url有关信息的各种方法
使用mysql的disctinct group by查询不重复记录
PHP集成FCK的函数代码
SVN配置和apache的配置
安装Windows Server 2003 SP1的10大理由
Xhtml第5天:head区的其他设置
javaScript 中 call 函数的用法说明
javascript parseInt 大改造
Windows 7解决影音文件双语并行问题
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4