jquery怎么实现淡入淡出效果?
jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。
● jQuery fadeIn()方法:用于淡入已隐藏的元素
● jQuery fadeOut()方法:用于淡出可见的元素
● jQuery fadeToggle()方法:方法可以在fadeIn()与fadeOut()方法之间进行切换
(相关课程推荐:jQuery教程)
示例:
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Document</title> <style> #app{ width: 100px; height: 100px; background: skyblue; } #app:focus{ background: green; } </style> </head> <body> <script src="./jquery.min.js"></script> <button id="btnin">淡入</button> <button id="btnout">淡出</button> <button id="btntaggle">切换</button> <div id="app"></div> <script> $('#btnin').click(()=>{ $('#app').fadeIn(); // 淡入 }) $('#btnout').click(()=>{ $('#app').fadeOut(); // 淡出 }) $('#btntaggle').click(()=>{ $('#app').fadeToggle(); // 切换 }) </script> </body> </html>
效果:
本文来自jQuery答疑栏目,欢迎学习!
以上就是jquery怎么实现淡入淡出效果?的详细内容,更多请关注易知道|edz.cc其它相关文章!