jQuery如何使用fadeToggle()方法（代码示例） _jQuery

【jQuery如何使用fadeToggle()方法（代码示例）】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 >

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