淡入淡出效果, 其实也就是显示和隐藏的效果, 不过是赋予了动态效果, 更加生动而已, 下面我们就来看一下如何使用 jQuery 实现淡入淡出效果吧.
jQuery 实现淡入效果使用 fadeIn(), 淡出效果使用 fadeOut(), 来回切换使用 fadeToggle().
● jQuery fadeIn() 方法: 用于淡入已隐藏的元素
● jQuery fadeOut() 方法: 用于淡出可见的元素
● jQuery fadeToggle() 方法: 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
(相关课程推荐: jQuery 教程 https://www.html.cn/jskuangjia/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 答疑 https://www.html.cn/qa/jquery/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/jquery/15404.html