jQuery 的渐隐渐显动画 ( 参考一下13即可 )
通过操作 元素的 opacity 达到效果
opacity 是Css的透明度属性啊
1. faseIn() //显示到指定透明度
+ opacity 0 ~ 1
2. fadeOut() //隐藏到指定透明度
+ opacity 1 ~ 0
3. fadeToggle() //切换
+ 切换
上面的语法都如下：
方法.(时间, 运动曲线, 回调函数)
4. fadeTo()
+ 运动到指定透明度
+ 语法: fadeTo(时间, 指定透明度, 运动曲线, 回调函数)
值得注意的是 fadeTo这个方法指定透明度后 他无论是 显/隐 还是 切换 以后都是透明度x 的了，因为呢 我也不知道.
例： ....自己试试即可：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jqsourse.js"></script> <style> *{ margin:0; padding: 0; } div{ width: 200px; height: 200px; background-color: red; margin-top: 10px; } input{ margin-top: 10px; width: 100px; height: 100px; } </style> </head> <body> <input class="show" type="button" value="显示"> <input class="hide" type="button" value="隐藏"> <input class="toggle" type="button" value="切换"> <input class="fadeTo" type="button" value="切换到指定透明度"> <div></div> <script> $('.show').click(()=>{ $('div').fadeIn(1000,'linear',()=>{ console.log("显示div"); }) }); $('.hide').click(()=>{ $('div').fadeOut(1000,'linear',()=>{ console.log("隐藏div"); }) }); $('.toggle').click(()=>{ $('div').fadeToggle(1000,'linear',()=>{ console.log("切换div"); }) }); $('.fadeTo').click(()=>{ $('div').fadeTo(1000,0.5,'linear',()=>{ console.log("切换到指定透明度"); }) }); </script> </body> </html>