跳转至

Jquery效果 隐藏和消失

1. 介绍

 我们有时候在页面上点击的时候，出现某个东西或者显示。

  • jQuery hide()

简单的jQuery hide()方法演示。

  • jQuery hide()

另一个hide()实例。演示如何隐藏文本。

语法 

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

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

参数 描述
speed 可选。规定元素从可见到隐藏的速度。默认为 "0"。可能的值：
- 毫秒 （比如 1500）
- "slow"
- "normal"
- "fast"
- 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
callback 可选。hide 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

2. 案例

2.1 不带延时

不带延时

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<p>点击下面两个按钮，看下效果吧</p>
<button id="hide">隐藏</button>
<button id="display">显示</button>
</body>
<script>
    x = 0;
    $(function () {
        $(".cmz").scroll(function () {
            $("span").text(x += 1);
        });
    });
    $(function () {
        $('#hide').click(function () {
            $("p").hide();
        });
        $('#display').click(function () {
            $("p").show();
        })
    });
</script>
</html>

2.1 带延间

带延时

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<p>点击下面两个按钮，看下效果吧</p>
<button id="hide">隐藏</button>
<button id="display">显示</button>
</body>
<script>
    x = 0;
    $(function () {
        $(".cmz").scroll(function () {
            $("span").text(x += 1);
        });
    });
    $(function () {
        $('#hide').click(function () {
            $("p").hide(1000);
        });
        $('#display').click(function () {
            $("p").show(1000);
        })
    });
</script>
</html>

带不带延时就是取决于后面是否带参数，默认单位是毫秒

2.3 toggle

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<p>点击下面按钮，看下效果吧</p>
<button id="toggle">切换</button>
</body>
<script>
    $(function () {
        $('#toggle').click(function () {
            // $('p').toggle();
            // $('p').toggle("slow");
            // $('p').toggle("fast");
            $('p').toggle(2000);

        })
    });
</script>
</html>

toggle 可以加参数