一、jQuery hide() 显示和 show()隐藏

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#hide').click(function(){
             $("p").hide();
        })
        $('#show').click(function(){
            $("p").show();
        });
    });
</script>
</head>
<body>
    <p id="p1">如果点击“隐藏”按钮，我就会消失。如果点击“显示”按钮，我又出现啦</p>
    <button id="hide" type="button">隐藏</button>
    <button id="show" type="button">显示</button>
</body>

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#hide').click(function(){
             $("p").hide(1000);//给hide加上参数
        })
        $('#show').click(function(){
            $("p").show(1000);
        });
    });
</script>
</head>
<body>
    <p id="p1">如果点击“隐藏”按钮，我就会消失。如果点击“显示”按钮，我又出现啦</p>
    <button id="hide" type="button">隐藏</button>
    <button id="show" type="button">显示</button>
</body>

二、jQuery toggle()方法

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#hide').click(function(){
             $("p").toggle(1000);//给hide加上参数
        });
    });
</script>
</head>
<body>
    <p id="p1">如果点击"隐藏/显示"按钮，我就会消失或者出现啦</p>
    <button id="hide" type="button">隐藏/显示</button>
</body>

语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery_效果(隐藏和显示)的更多相关文章

  1. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

  2. Jquery_效果-隐藏显示、淡入淡出、滑动面板、简单的动画队列

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. jQuery效果---隐藏与显示

    隐藏与显示 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. jQuery效果------隐藏hide()/显示show()

    hide()和show() hide():隐藏文本. show():显示文本. 语法: $(selector).hide(speed,callback); $(selector).show(speed ...

  5. jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链

    隐藏和显示 $(selector).hide(speed,callback);  $(selector).show(speed,callback);   可选的 speed 参数规定隐藏/显示的速度, ...

  6. jQuery 效果 - 隐藏和显示

    $('...').hide();//隐藏 $('...').show();//显示 以上使用需要针对特定的功能单独使用,如果是混用,那么就要有标志位去实现,而通常两者更高级的一步到位实现: $('.. ...

  7. jQuery 效果 – 隐藏和显示

    在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏.显示.切换,滑动 ...

  8. jQuery效果--隐藏和显示

    jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click( ...

  9. jQuery效果-隐藏与显示 小方块的移除

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

随机推荐

  1. remoting技术

    转: http://www.cnblogs.com/rickie/category/5082.html

  2. Codeforces Round #231 (Div2) 迟到的解题报告

    题目A: 给一个火柴等式,可以从左边移动一根到右边,也可以从右边移到左边,但是不能移动“+”,”=“的火柴, 而且加法里面的数都要大于0(很重要的条件),基本上注意到这点的都过了,没注意的都被HACK ...

  3. LNMP笔记：安装 Xcache 缓存扩展，降低服务器负载

    LNMP笔记:安装 Xcache 缓存扩展,降低服务器负载 2014/11/27 教程笔记 4,743 14     WordPress 精品主机推荐:恒创主机 | 阿里云(本站目前所用云主机) 倡萌 ...

  4. CodeForces 1B Spreadsheets (字符串处理，注意细节，大胆尝试)

    题目 注意模后余数为0时,要把除以26后的新数据减1,为什么这样,要靠大胆尝试.我在对小比赛中坑了一下午啊,直到比赛结束也没写出这道题....要死了.. #include<stdio.h> ...

  5. ListView的item选中效果

    有时app会需要点击某个item并实现选中的效果,例如做pad时用Fragment实现的左侧列表右侧内容的效果,点击左侧某一个item后会高亮选中 有时简单的使用setSelected(boolean ...

  6. LoaderManager使用详解（一）---没有Loader之前的世界

    来源: http://www.androiddesignpatterns.com/2012/07/loaders-and-loadermanager-background.html 感谢作者Alex ...

  7. TCP套接字编程

    一.套接字(socket)函数 图1给出了在一个TCP客户与服务器通信的流程.服务器首先启动,稍后某个客户启动,它试图连接到服务器.假设客户给服务器发送一个请求,服务器处理该请求,并且给客户发回一个相 ...

  8. Jquery---用jQuery实现的智能隐藏、滑动效果的返回顶部代码

    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script& ...

  9. Java常用类库

    System System:类中的方法和属性都是静态的. out:标准输出,默认是控制台. in:标准输入,默认是键盘. System描述系统一些信息.获取系统属性信息:Properties getP ...

  10. 由枚举模块到ring0内存结构 (分析NtQueryVirtualMemory)

    是由获得进程模块而引发的一系列的问题,首先,在ring3层下枚举进程模块有ToolHelp,Psapi,还可以通过在ntdll中获得ZwQuerySystemInformation的函数地址来枚举,其 ...