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 >输出如下：
在单击按钮之前：
单击按钮后：
