動畫特效 · jQuery學習

## slideDown與slideUp ### 概述：slideDown與slideUp這兩個方法是由JQ提供的，這兩者主要的作用是可以讓匹配元素進行，向上滑動，下上卷起操作。 ## 語法格式： ## fadeOut與 fadeIn ### 他們也是JQ函數庫提供方法。他們可以匹配元素添加特效，就是可以給匹配元素添加淡出，淡入效果。 ### `$(selector).fadeIn(time,callbck) ` ## slideDown與slideUp:動態修改表現的高度 ## fadeIn與fadeOut:動態修改標簽元素（透明度） ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./jquery/jquery-3.2.1.min.js"></script> <title>Title</title> <style> *{ margin: 0; padding: 0; } div{ width:250px; height:250px; background: blue; } </style> </head> <body> <button>slideDown</button> <button>slideUp</button> <button>fadeOut</button> <button>fadeIn</button> <div></div> </body> </html> <script type="text/javascript"> $("button:eq(0)").click(function (){ $("div").slideUp(1000); }) $("button:eq(1)").click(function(){ $("div").slideDown(100 ); }) $("button:eq(2)").click(function(){ $("div").fadeOut(); }) $("button:eq(3)").click(function (){ $("div").fadeIn(2000,function(){ $("div").css("background","red"); }); }) </script> ~~~