使用jQuery实现简单的淡入淡出
示例代码:
<!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>