使用jQuery實現簡單的淡入淡出
阿新 • • 發佈：2022-04-18
示例程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { height: 400px; width: 200px; background-color: pink; } </style> </head> <body> <button>淡入效果</button> <button>淡出效果</button> <button>淡入淡出切換</button> <button>修改透明度</button> <div></div> </body> <script src="/js檔案/jQuery.mini.js"></script> <script type="text/javascript"> $(function() { $("button").eq(0).click(function () { //淡入 fadeIn() $("div").fadeIn(100); }) $("button").eq(1).click(function () { //淡出 fadeOut() $("div").fadeOut(100); }) $("button").eq(2).click(function () { //淡入淡出切換 fadeToggle()$("div").fadeToggle(100); }) $("button").eq(3).click(function () { //修改透明度 fadeTo() 速度和透明度一定要寫 $("div").fadeTo(100, 0.5); }) }) </script> </html>