一、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. Python中__init__方法/__name__系统变量讲解

    __init__方法在类的一个对象被建立时,马上运行.这个方法可以用来对你的对象做一些你希望的初始化. 代码例子 test.py#!/usr/bin/python# Filename: class_i ...

  2. 自己写简单CoreDataManager封装对CoreData操作

    关于CoreData的介绍太多,网上一搜大把全是,这里不介绍CoreData,直接上代码,注释写的很详细,应该很容易理解,暂时现做简单的增删该查,后面有时间再做修改完善. CoreDataManage ...

  3. PE文件结构

    PE头 typedef struct _IMAGE_NT_HEADERS { DWORD Signature; PE头标识 为固定的ascii码 PE\\ IMAGE_FILE_HEADER File ...

  4. HDU 1393 Weird Clock (英语，纪念题)

    这题简单,只要看懂题目就好,坑爹的是我的英语水平太差了,wa了n次,所以 仅此纪念 一下. //坑爹的英语题目,注意重点:move d times clockwise the current time ...

  5. Delphi的时间处理

    这几天因为自己要学习编写一个小程序中要用到一些时间处理.就在网上搜集一些教材学习到一般的应用,做个笔记,加深印象. 用上Delphi中相应的函数,Delphi的时间处理起来还是很容易的. Delphi ...

  6. CAS登录后回传除了ticket参数以外的其他自定义参数

    在一次项目的技术选型中,选择了easyui+cas+shiro+spring的组合,cas实现了单点登录,这使得在一个应用中嵌入另一个应用的页面来展示数据所涉及到的授权方面变得简单. 由于shiro在 ...

  7. 在Vista或Windows 7系统上安装Sharepoint 2007

    在Vista或Windows 7系统上安装Sharepoint 2007 2010-03-05 18:53:19|  分类: 技术文章|字号 订阅     SharePoint 2007 不能直接安装 ...

  8. ExtJs之Ext.query

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  9. hdu 2999 Stone Game, Why are you always there? 博弈论

    SG函数应用!! 代码如下: #include<cstdio> #include<cstring> #include<iostream> #include<c ...

  10. （9）nehe教程3--添加颜色

    添加颜色: 作为第二课的扩展,我将叫你如何使用颜色.你将理解两种着色模式,在左图中,三角形用的是光滑着色,四边形用的是平面着色. 上一课中我教给您三角形和四边形的绘制方法.这一课我将教您给三角形和四边 ...