Jquery 滑入滑出效果实现代码_技术学院_宜昌市隼壹珍商贸有限公司

您好,欢迎访问宜昌市隼壹珍商贸有限公司

400 890 5375
当前位置: 主页 > 新闻动态 > 技术学院

Jquery 滑入滑出效果实现代码

发布时间:2026-01-17  |  点击率:
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供个人记录学习笔记,如有错误欢迎指出!

全国统一服务电话

400 890 5375

电子邮箱:879577@qq.com

公司地址:宜昌市西陵区黄河路5号三峡明珠10栋1051室

咨询微信

TEL:13680874598