JQuery 效果

作者：忱雾

撰写时间：2021/6/6

1.隐藏和显示

(1).jQuery通常使用hide()和show()来隐藏和显示HTML元素。

隐藏元素语法: $(selector). hide (speed, callback);

显示元素语法: $(selector). show (speed, callback);

参数:

Speed：可选，规定隐藏/显示的速度，可取值范围：”slow”、”fast” 或毫秒。

Callback：可选，是隐藏或显示完成后所执行的函数名称。

例如：

(2).jQuery使用toggle()方法来切换hide()和show()方法。

语法：$(selector). toggle (speed, callback);

参数:

Speed：可选，规定隐藏/显示的速度，可取值范围：”slow”、”fast”或毫秒。

Callback：可选，是隐藏或显示完成后所执行的函数名称。

例如：

 

2.淡入淡出

通过jQuery，可以实现元素的淡入淡出效果。

jQuery有以下四种fade方法：

• fadeIn()
• fadeout()
• fadeToggle()
• fadeTo()

(3). fadeIn()用于淡入已隐藏的元素。

语法：$ (selector). fadeIn (speed，callback);

参数：

Speed：可选，规定效果的时长，可取值范围：”slow”，”fast”或毫秒。

Callback：可选，是fading完成后所执行的函数名称。

例如：

(4). fadeOut()的用法与fadeIn()基本一样。

(5). fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。

例如：

(5). fadeTo()方法允许渐变为给定的不透明度（值价于0与1之间）。

语法：$(selector).fadeTo(speed，opacity，callback)；

参数：

Speed：必填，规定效果的时长，可取值范围：”slow”、”fast” 或毫秒。

Opacity：必填，必填，将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

Callback：可选，是fading完成后所执行的函数名称。

例如：

3.滑动

jQuery滑动方法可以让元素上下滑动，使元素有收起展开的效果。

(6). slideDown() & slideUp()方法用于向上滑动元素。

语法：$(selector). slideDown / slideUp (speed，callback);

参数：

Speed：可选，规定效果的时长，可取值范围：”slow”、”fast”或毫秒。

Callback：可选，是滑动完成后所执行的函数名称。

例如：

(7).slideToggle() 方法可以在slideDown() 和 slideUp() 方法之间进行切换。

语法：$(selector). slideToggle(speed,callback);

参数：

Speed：可选，规定效果的时长，可取值范围：” slow”、”fast”或毫秒

Callback：可选，是滑动后所执行的函数名称。

例如：

以上是我总结的简单的JQuery效果的方法小技巧分享给各位小白，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或有疑问的地方欢迎在评论区教导和提问喔！