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

📅  最后修改于: 2022-05-13 01:55:56.669000             🧑  作者: Mango

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用于控制隐藏元素的速度,第二个可选参数在衰落完成后使用。
    例子 :
    输出 :