动画特效 · 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> ~~~