当前位置:  编程技术>jquery

jQuery实现显示与隐藏div

    来源: 互联网  发布时间:2014-09-03

    本文导语:  JavaScript代码 代码如下:     /*      *显示      *.show(speed, [callback]);以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。有speed参数和可选callback参数,speed表示显示的时间毫秒,后面的是可选函数....

JavaScript代码

代码如下:
    /*
     *显示
     *.show(speed, [callback]);以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。有speed参数和可选callback参数,speed表示显示的时间毫秒,后面的是可选函数.
     *$("#www").show(1000,function(){alert("回调函数");});这样1秒后第一个层显示全部,然后弹出"回调函数" 对话框.speed,三种预定速度之一的字符串("slow", "normal", or "fast")分别是600ms,400ms和200ms
    */ 
    function show(){ 
        $("#divObj").show(); 
    } 
     
    /*.hide(speed, [callback]);以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数,参考上面的*/ 
    function hiden(){ 
        $("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast 
    } 
     
    function fadeIn(){ 
        $("#divObj").fadeIn(2000);//淡入,参数可以无,参数说明同上 
    } 
    function fadeOut(){ 
        $("#divObj").fadeOut(2000);//淡出,参数可以无,参数说明同上 
    } 
     
    /*.slideDown(speed, [callback]);窗帘效果展开;通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。回调函数是可选的,speed也有上面的三种预定速度,也可以是数值.*/ 
    function slideDown(){ 
        $("#divObj").slideDown(); 
    } 
     
    /*.slideUp(speed, [callback]);窗帘效果折叠;通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数 同上不过是用来隐藏的*/ 
    function slideUp(){ 
        $("#divObj").slideUp(); 
    } 
     
    /*
     *窗帘效果的切换,参数可以无,参数说明同上,如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
     *toggle(speed, [callback]);一样的多了speed和callback函数.跟toogle()一样,不过多了时间和回调函数
    */ 
    function slideToggle(){ 
        $("#divObj").slideToggle(2000); 
    } 
     
    /*
     *显示隐藏切换,参数可以无,参数说明同上;
     *.toggle(switch);根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。switch可以用function()返回函数决定
     *.slideToggle(speed, [callback]);设置时间来通过高度变化,切换触发显示隐藏.参数同上.
    */ 
    function toggle(){ 
        $("#divObj").toggle(2000); 
    } 

HTML代码
 

代码如下:
    div里内容的显示隐藏特效 
     
     
     
     
     
     
     
     
   
 
        1.测试例子
 
        2.测试例子
 
        3.测试例子
 
        4.测试例子
 
        5.测试例子
 
        6.测试例子
 
        7.测试例子
 
        8.测试例子
 
        9.测试例子
 
        0.测试例子
 
   
 

点这里查看演示


    
 
 

您可能感兴趣的文章:

  • jQuery显示隐藏密码插件 jquery.toggle-password
  • jquery控制css的display属性(显示与隐藏)
  • jquery显示与隐藏div的方法示例
  • 博客 iis7站长之家
  • jquery控制css元素的display(显示与隐藏)属性
  • jquery控制css display属性(控制元素显示与隐藏)
  • jquery响应鼠标事件 jquery隐藏与显示input默认值
  • jquery hide与show方法隐藏与显示标签
  • jquery实现div层的隐藏或显示
  • jquery显示、隐藏div的方法举例
  • 页面元素绑定jquery toggle后元素隐藏的解决方法
  • jquery隐藏标签、显示标签的例子
  • jquery判断元素是否隐藏的2种方法
  • jquery通过visible来判断标签是否显示或隐藏
  • jquery form 隐藏的input 选择
  • jQuery判断对象是否显示或隐藏
  • Jquery判断div是否为空以实现显示或隐藏的代码
  • jQuery使任意div随意隐藏的代码举例
  • jquery hide方法隐藏元素的例子
  • 比较不错的JS/JQuery显示或隐藏文本的方法
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • JQuery实现元素屏幕居中显示的代码
  • jquery 回车登录的实现方法
  • 基于jQuery实现的MVC开发框架 CorMVC
  • 简单的代码实现jquery定时器
  • jQuery Trim去除字符串首尾空字符的实现方法说明
  • jquery插件开发之实现jquery手风琴功能分享
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery实现的导航固定效果
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery图片显示插件 PrettyPhoto
  • 显示矢量地图的jQuery 插件 jVectorMap
  • jQuery源码结构显示插件 CodeExplorer
  • textarea显示成label的样式 jquery实例
  • jQuery 解析和显示 RSS 订阅插件 FeedEk
  • jQuery 等高显示插件 matchHeight
  • jQuery 幻灯效果显示插件 Diapo
  • jQuery图片显示插件 PictureSlides
  • 自定义jquery模态窗口插件无法在顶层窗口显示问题
  • jquery当前时间的设置与显示代码
  • jQuery 照片获取和显示插件 ballboy.js
  • Jquery easyui分页栏显示1到0怎么解决?
  • jquery fancybox ie6不显示关闭按钮的解决办法
  • jQuery评论显示插件 Quovolver
  • jquery 提示信息显示后自动消失的具体实现
  • jquery让返回的内容显示在特定div里(代码少而精悍)
  • jquery动态设置超链接显示内容的实现代码
  • Jquery如何实现点击时高亮显示代码
  • jquery监听input内容显示提示的示例代码
  • jquery代码-如何显示或删除input域中的默认值
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3