Jquery 滑入滑出效果实现代码
发布时间：2013-08-23 编辑：jiaochengji.com
Jquery 滑入滑出效果实现代码，需要的朋友可以参考下。
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供个人记录学习笔记，如有错误欢迎指出！
复制代码 代码如下:
<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供个人记录学习笔记，如有错误欢迎指出！
您可能感兴趣的文章：
Jquery 滑入滑出效果实现代码
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
jQuery幻灯片放映插件 CrossSlide
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
JQUERY实现左侧TIPS滑进滑出效果示例
利用JQuery动画制作滑动菜单项效果实现步骤及代码
jQuery 右下角滑动弹出可关闭重现层完整代码
HTML5单页面手势滑屏切换原理分析
jquery必须知道的一些常用特效方法及使用示例(整理)
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
[关闭]