jQuery 效果- 隐藏和显示

jQuery 是一种 JavaScript 库，需要用 JavaScript 文档来运行。它被广泛应用于网页开发中，以简化 JavaScript 代码的编写以及网页效果的制作。

jQuery 的效果之一是隐藏和显示元素。它可以使元素消失或显现，使页面变得更加动态和丰富。

这篇技术文档将介绍如何使用 jQuery 来实现隐藏和显示效果。

show() 方法

show() 方法用于将元素显示出来。它的语法如下：

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

其中，selector 表示需要显示的元素。speed 表示显示效果的速度，可以是 “slow”(慢)，“fast”(快)，或指定毫秒数的数字。callback 是当显示效果完成后执行的函数（可选）。

示例代码如下：

$("#btn1").click(function(){
    $("p").show();
});

这段代码中，当按钮 id 为 “btn1” 的元素被点击时，所有 p 元素都将被显示出来。

hide() 方法用于将元素隐藏。它的语法和 show() 方法类似：

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

其中，selector 表示需要隐藏的元素。speed 表示隐藏效果的速度，可以是 “slow”(慢)，“fast”(快)，或指定毫秒数的数字。callback 是当隐藏效果完成后执行的函数（可选）。

示例代码如下：

$("#btn2").click(function(){
    $("p").hide();
});

这段代码中，当按钮 id 为 “btn2” 的元素被点击时，所有 p 元素都将被隐藏起来。

toggle() 方法用于切换元素的显示和隐藏状态。它的语法如下：

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

其中，selector 表示需要切换显示状态的元素。speed 表示切换效果的速度，可以是 “slow”(慢)，“fast”(快)，或指定毫秒数的数字。callback 是当切换效果完成后执行的函数（可选）。

示例代码如下：

$("#btn3").click(function(){
    $("p").toggle();
});

这段代码中，当按钮 id 为 “btn3” 的元素被点击时，所有 p 元素的显示和隐藏状态将被切换。

fadeIn() 方法用于将元素淡入显示，而 fadeOut() 方法用于将元素淡出隐藏。它们的语法如下：

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);

其中，selector 表示需要显示或隐藏的元素。speed 表示淡入或淡出效果的速度，可以是 “slow”(慢)，“fast”(快)，或指定毫秒数的数字。callback 是当淡入或淡出效果完成后执行的函数（可选）。

示例代码如下：

$("#btn4").click(function(){
    $("p").fadeIn();
});
$("#btn5").click(function(){
    $("p").fadeOut();
});

这段代码中，当按钮 id 为 “btn4” 的元素被点击时，所有 p 元素将被淡入显示；当按钮 id 为 “btn5” 的元素被点击时，所有 p 元素将被淡出隐藏。

fadeToggle() 方法用于切换元素的淡入和淡出状态。它的语法如下：

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

其中，selector 表示需要切换淡入和淡出状态的元素。speed 表示切换效果的速度，可以是 “slow”(慢)，“fast”(快)，或指定毫秒数的数字。callback 是当切换效果完成后执行的函数（可选）。

示例代码如下：

$("#btn6").click(function(){
    $("p").fadeToggle();
});

这段代码中，当按钮 id 为 “btn6” 的元素被点击时，所有 p 元素的淡入和淡出状态将被切换。

slideDown() 方法用于将元素向下展开显示，而 slideUp() 方法用于将元素向上收起隐藏。它们的语法如下：

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);

其中，selector 表示需要展开或收起的元素。speed 表示展开或收起效果的速度，可以是 “slow”(慢)，“fast”(快)，或指定毫秒数的数字。callback 是当展开或收起效果完成后执行的函数（可选）。

示例代码如下：

$("#btn7").click(function(){
    $("p").slideDown();
});
$("#btn8").click(function(){
    $("p").slideUp();
});

这段代码中，当按钮 id 为 “btn7” 的元素被点击时，所有 p 元素将被向下展开显示；当按钮 id 为 “btn8” 的元素被点击时，所有 p 元素将被向上收起隐藏。

slideToggle() 方法用于切换元素的展开和收起状态。它的语法如下：

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

其中，selector 表示需要切换展开和收起状态的元素。speed 表示切换效果的速度，可以是 “slow”(慢)，“fast”(快)，或指定毫秒数的数字。callback 是当切换效果完成后执行的函数（可选）。

示例代码如下：

$("#btn9").click(function(){
    $("p").slideToggle();
});

这段代码中，当按钮 id 为 “btn9” 的元素被点击时，所有 p 元素的展开和收起状态将被切换。

以上是 jQuery 实现元素隐藏和显示的常用方法，通过使用这些方法可以让页面效果更加丰富和动态。