jQuery如何使用fadeIn()方法（示例）

fadeIn()方法在jQuery中, 用于将选定元素的不透明度从隐藏更改为可见。隐藏的元素将不会显示。
语法如下：

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

参数：此方法接受上述和以下所述的三个参数：

速度：它是一个可选参数, 用于指定衰落效果的速度。速度的默认值为400毫秒。可能的速度值为：
- 毫秒
- "slow"
- "fast"
easing：它是一个可选参数, 用于指定元素到动画不同点的速度。缓动的默认值为" swing"。easing的可能值是：
- "swing"
- "linear"
callback：它是可选参数。在fadeIn()方法完成后执行回调函数。

以下示例说明了jQuery中的fadeIn()方法：
范例1：本示例描述了速度为1000毫秒的fadeIn()方法。

< !DOCTYPE html> < html > < head > < title > fadeIn() Method in jQuery < / title > < style > #Outer { border: 1px solid black; padding-top: 40px; height: 140px; background: green; display: none; } < / style > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < / script > < / head > < body style = "text-align:center; " > < div id = "Outer" > < h1 style = "color:white; " > lsbin < / h1 > < / div > < br > < button id = "btn" > Fade In < / button > < !-- jQuery script of fadeIn() method --> < script > $(document).ready(function() { $("#btn").click(function() { $("#Outer").fadeIn(1000); }); }); < / script > < / body > < / html >

输出如下：
在单击按钮之前：

文章图片
单击按钮后：

文章图片
范例2：这个例子描述了带有" swing"缓动的fadeIn()方法。

< !DOCTYPE html> < html > < head > < title > fadeIn() Method in jQuery < / title > < style > #Outer { border: 1px solid black; padding-top: 40px; height: 140px; background: green; display: none; } < / style > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < / script > < / head > < body style = "text-align:center; " > < div id = "Outer" > < h1 style = "color:white; " > lsbin < / h1 > < / div > < br > < button id = "btn" > Fade In < / button > < !-- jQuery script of fadeIn() method --> < script > $(document).ready(function() { $("#btn").click(function() { $("#Outer").fadeIn("swing"); }); }); < / script > < / body > < / html >

输出如下：
在单击按钮之前：