jQuery |隐藏/显示、切换和淡入淡出方法示例

jQuery 提供了一个非常简单的界面来实现各种惊人的效果。 jQuery 方法允许我们以最少的配置快速应用常用的效果。

jQuery 隐藏（）和显示（）

• jQuery hide() :隐藏你想隐藏的语法或html元素。

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

• jQuery show() ：显示您希望用户看到的 html 语法或元素。

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

对于上述两种语法，速度参数是一个可选参数，用于定义隐藏和显示 html 内容的速度。可以使用预定义的字符串’slow’ 或 ‘fast’ 之一或以毫秒为单位指定持续时间，以获得更高的精度；较高的值表示较慢的动画。
回调参数是隐藏和显示函数完成后使用的可选参数。

例子 ：
hide() 方法只是为所选元素设置内联样式 display:?none 。相反，show() 方法将匹配的元素集的显示属性恢复到它们最初的状态——通常是块、内联或内联块——在内联样式 display:?none 应用于它们之前。
输出 ：

速度参数示例：
示例 1：
输出 ：

示例 2：
输出 ：

jQuery 切换（）

jQuery toggle() 方法显示或隐藏元素，如果元素最初显示，它将被隐藏；如果隐藏，它将显示出来。

句法 ：

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

速度和回调参数与上一个相同的可选参数。
例子 ：
输出 ：

jQuery 淡入淡出方法

在 jQuery 的帮助下，您可以根据需要淡入或淡出 HTML 元素。
以下是淡入淡出的方法：

1. jQuery 淡入淡出() 方法：
   句法 ：

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

   FadeIn()函数用于在 HTML 中显示隐藏元素。可选参数speed用于控制隐藏元素的速度，第二个可选参数在衰落完成后使用。
   例子 ：
   输出 ：
2. jQuery 淡出（）方法：
   句法 ：

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

   FadeOut()函数用于淡出（隐藏）HTML 中的元素。可选参数speed用于控制查看元素的速度，第二个可选参数在淡出完成后使用。
   例子 ：
   输出 ：
3. jQuery 淡入淡出（）方法：
   句法 ：

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

   FadeToggle()函数用于在fadeIn()和fadeOut之间切换
   例子 ：
   输出 ：
4. jQuery 淡入淡出（）方法：
   句法 ：

   $(selector).fadeTo(speed, opacity, callback);

   FadeTo()函数允许将元素淡化到给定的不透明度（范围在 0 和 1 之间），这是填写此函数的必填字段。可选参数speed用于控制隐藏元素的速度，第二个可选参数在衰落完成后使用。
   例子 ：
   输出 ：