这篇文章主要讲解了“jQuery怎么实现淡入淡出效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jQuery怎么实现淡入淡出效果”吧!
用jQuery完成淡入淡出效果前,我们先来认识几个代码:
淡入 fadeIn([ speed , [easing] , [fn] ]),参数都可不写
淡出 fadeOut([ speed , [easing] , [fn] ]),参数都可不写
淡入淡出切换 fadeToggle([ speed , [easing] , [fn] ]),参数都可不写
修改透明度 fadeTo([ [speed] , opacity , [easing] , [fn] ]),注意,这里速度和透明度一定要写
其中
speed是速度
easing是切换效果
fn是回调函数
那我们把上述代码放到整体代码中看下效果
完整代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Wellfancy</title> <style> div { margin: 10px; padding: 10px; width: 100px; display: none; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <button>淡入效果</button> <button>淡出效果</button> <button>淡入淡出切换</button> <button>修改透明度</button> <div> <img src="images/1.jpg" > </div> <script> $(function() { $("button").eq(0).click(function() { $("div").fadeIn(1000); }) $("button").eq(1).click(function() { $("div").fadeOut(1000); }) $("button").eq(2).click(function() { $("div").fadeToggle(1000); }); $("button").eq(3).click(function() { $("div").fadeTo(1000, 0.5); }); }); </script> </body> </html>
感谢各位的阅读,以上就是“jQuery怎么实现淡入淡出效果”的内容了,经过本文的学习后,相信大家对jQuery怎么实现淡入淡出效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。