一、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. codeforces #240 div 2

    A:语文题,估计大家都会, B题:假如答案是ans,求最大的ans,是w*a/b==(w-ans)*a/b; 明显的二分,可是我的二分写的没水准,还有是直接做: #include<string. ...

  2. Cortex-M3/4的Hard Fault调试方法

    1 Cortex-M3/4的Fault简介 Cortex-M3/4的Fault异常是由于非法的存储器访问(比如访问0地址.写只读存储位置等)和非法的程序行为(比如除以0等)等造成的.常见的4种异常及产 ...

  3. CentOS用yum安装X Window

    安装X图形界面系统 yum list 列出所有可安装的软件包 可以通过 yum grouplist 来查看可能批量安装哪些列表 先装X windows #yum groupinstall 'X Win ...

  4. 几种CPU架构

    原文链接:http://blog.csdn.net/wyzxg/article/details/5027738 这几天在下载RPM包的时候,总会看见x86,x86-64,IA64,i386,i586等 ...

  5. delphi快捷键

    分类 快捷键 解释 备注 组 件 设 计 类 Escape 选择当前组件容器     Shift + Click 选择多个组件:选择窗体     Tab 选择下一个组件     Shift + Tab ...

  6. iOS多线程的初步研究（九）-- dispatch源

    dispatch源(dispatch source)和RunLoop源概念上有些类似的地方,而且使用起来更简单.要很好地理解dispatch源,其实把它看成一种特别的生产消费模式.dispatch源好 ...

  7. java集合之ArrayList的实现原理

    1. ArrayList概述: ArrayList是List接口的可变数组的实现.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类还提供一些方法来操作内部 ...

  8. App接口设计1

    http://blog.csdn.net/newjueqi/article/details/44062849 http://www.tuicool.com/articles/YNZBna http:/ ...

  9. hdu 3094 A tree game 博弈论

    思路: 叶子节点的SG值为0:中间节点的SG值为它的所有子节点的SG值加1 后的异或和. 详见贾志豪神牛的论文:组合游戏略述 ——浅谈SG游戏的若干拓展及变形 代码如下: #include<cs ...

  10. Why you have so few friends?

    Why you have so few friends?十个原因告诉你:为什么你的朋友那么少1. You Complain A Lot 你总是抱怨 If you’re constantly compl ...