jQuery_效果(隐藏和显示)

一、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)