一、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. Yahoo, Steve blog

    Performance Research Domain Sharding revisited A Software Developer's Guide to HTTP How the Browser ...

  2. 异步JS：$.Deferred的使用

    异步JS:$.Deferred的使用 原文链接:http://www.html5rocks.com/en/tutorials/async/deferred/ 当我们构建一个平稳的,响应式的HTML5应 ...

  3. Unity bundle的制作和使用

    原地址:http://unity3d.9ria.com/?p=2863 Unity有个很好的功能,大致是很多专注于PC的engine没有提供的(因为没有必要),就是能加载主包外的资源,这个主包外的资源 ...

  4. poj 2348

    Euclid's Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7418   Accepted: 3022 Des ...

  5. awk处理之案例二：awk匹配文本

    编译环境 本系列文章所提供的算法均在以下环境下编译通过. [脚本编译环境]Federa 8,linux 2.6.35.6-45.fc14.i686 [处理器] Intel(R) Core(TM)2 Q ...

  6. iOS-CALayer图片淡入淡出动画

    ]; } - (.f;          CABasicAnimation *boundsAnimation = [CABasicAnimation animationWithKeyPath:, ,  ...

  7. Android屏幕适应详解(一）

    一.关于布局适配 1.不要使用绝对布局 2.尽量使用match_parent 而不是fill_parent . 3.能够使用权重的地方尽量使用权重(android:layout_weight) 4.如 ...

  8. Content Providers详解

    今天仔细阅读了一遍Content Providers的官方API文档,总结了一下Android中Content Providers的用法. 各种类型的Content Provider对一个结构化的数据 ...

  9. java 以及 vs 的快捷键

    javactrl+shift+y 小写ctrl+shift+x 大写ctrl+shift+f 格式化代码 vsctrl+u 小写ctrl+shift+u 大写ctrl+k+f 格式化代码

  10. OneApm，NewRelic

    https://newrelic.com/ http://www.csdn.net/article/2013-03-25/2814631-new-relic-mobile-app-real-time- ...