Jquery 滑入滑出效果实现代码

177 阅读 0 评论 117 点赞

我是靠谱客的博主朴实夕阳，最近开发中收集的这篇文章主要介绍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供个人记录学习笔记，如有错误欢迎指出！