fadeToggle()方法在jQuery中, 可以在fadeIn()和fadeOut()方法之间切换。如果元素被淡入, fadeToggle()将淡出。如果元素淡出, 则fadeToggle()将淡入。
语法如下：
$(selector).fadeToggle(speed, easing, callback)参数：此方法接受上述和以下所述的三个参数：
- speed：它是一个可选参数, 用于指定衰落效果的速度。速度的默认值为400毫秒。可能的速度值为：
- milliseconds
- "slow"
- "fast"
- easing：它是一个可选参数, 用于指定元素到动画不同点的速度。easing的默认值为" swing"。easing的可能值是：
- "swing"
- "linear"
- callback：它是可选参数。回调函数在fadeToggle()方法完成之后执行。
以下示例说明了jQuery中的fadeToggle()方法：
范例1：本示例以给定的速度显示fadeToggle()方法的效果。速度可以毫秒为单位设置。
<!DOCTYPE html>
< html >
< head >
< title >
jQuery fadeToggle() Method
</ 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 Toggle
</ button >
<!-- Script to use fadeToggle() Method -->
< script >
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").fadeToggle(1000);
});
});
</ script >
</ body >
</ html >输出如下：
在单击按钮之前：
首先单击按钮后：
在第二次单击按钮后：
范例2：本示例显示带有缓动的fadeToggle()方法效果。缓动用于设置动画不同点中元素的速度。
<!DOCTYPE html>
< html >
< head >
< title >
jQuery fadeToggle() Method
</ 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 Toggle
</ button >
< script >
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").fadeToggle("swing");
});
});
</ script >
</ body >
</ html >输出如下：
在单击按钮之前：
首先单击按钮后：
在第二次单击按钮后：
