Jquery 滑入滑出效果实现代码

Jquery 滑入滑出效果实现代码,需要的朋友可以参考下。

CSS

复制代码 代码如下:


<style type="text/css">
#divD{
width:300px;
height:100px;
background-color:#CC99FF;
}
</style>


Jquery代码

复制代码 代码如下:


<script type="text/javascript" src="https://www.jb51.net/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="滑入" />
<input type="button" value="滑出"/>
<div>这是div</div>
DIV
</body>


O(∩_∩)O每天进步一点点O(∩_∩)O 该BLOG供个人记录学习笔记,如有错误欢迎指出!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdsdyy.html