Jquery 滑入滑出效果实现代码

 更新时间:2010年03月27日 00:50:11   转载 作者:  
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供个人记录学习笔记,如有错误欢迎指出!

相关文章

  • jQuery使用ajax跨域获取数据的简单实例

    jQuery使用ajax跨域获取数据的简单实例

    下面小编就为大家带来一篇jQuery使用ajax跨域获取数据的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript前端页面搜索功能案例【基于jQuery】

    JavaScript前端页面搜索功能案例【基于jQuery】

    这篇文章主要介绍了JavaScript前端页面搜索功能案例,结合完整实例形式详细分析了基于jQuery实现的前端页面表格搜索功能相关实现技巧,需要的朋友可以参考下
    2019-07-07
  • jQuery插件ajaxFileUpload异步上传文件

    jQuery插件ajaxFileUpload异步上传文件

    这篇文章主要介绍了jQuery插件ajaxFileUpload异步上传文件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jQuery之简单的表单验证实例

    jQuery之简单的表单验证实例

    下面小编就为大家带来一篇jQuery之简单的表单验证实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • jquery $.each() 使用小探

    jquery $.each() 使用小探

    jquery each想必大家对此并不陌生吧,它的使用范围还是比较广泛的,下面与大家分享个示例来介绍jquery each的使用方法,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • jQuery on方法传递参数示例

    jQuery on方法传递参数示例

    这篇文章主要介绍了jQuery on方法传递参数示例,本文给出了一个传递3个参数的例子,需要的朋友可以参考下
    2014-12-12
  • jQuery位置选择器用法实例分析

    jQuery位置选择器用法实例分析

    这篇文章主要介绍了jQuery位置选择器用法,结合实例形式分析了jQuery位置选择器的功能、用法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • jquery prop的使用介绍及与attr的区别

    jquery prop的使用介绍及与attr的区别

    Prop和attr的作用类似,相同点:两者都可以获取属性值和设置属性值,下面为大家介绍下具体的使用
    2013-12-12
  • 使用jQuery将多条数据插入模态框的实现代码

    使用jQuery将多条数据插入模态框的实现代码

    这篇文章主要介绍了使用jQuery将多条数据插入模态框的方法,很简单,很实用,需要的朋友可以参考下
    2014-10-10
  • jQuery层级选择器_动力节点节点Java学院整理

    jQuery层级选择器_动力节点节点Java学院整理

    这篇文章主要为大家详细介绍了jQuery层级选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论