1. 淡入动画
1.1 不带参数的淡入动画
格式：
$(selector).fadeIn();
示例代码：
<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>fadeIn() Demo</title> ???<style type="text/css"> ???????div{ ???????????width: 300px; ???????????height: 300px; ???????????display: none; ???????????background-color: #ff6700; ???????} ???</style> ???<script type="text/javascript" src="jquery.js"></script> ???<script> ???????$(function () { ???????????$("button").click(function () { ???????????????$("div").fadeIn(); ???????????}); ???????}) ???</script></head><body> ???<button>淡入</button> ???<div></div></body></html>1.2 带数值参数的淡入动画
格式：
$(selector).fadeIn(Number);
参数： Number为毫秒值， 1s = 1000ms
代码示例：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeIn() Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????display: none;11 ????????????background-color: #ff6700;12 ????????}13 ????</style>14 ????<script type="text/javascript" src="jquery.js"></script>15 ????<script>16 ????????$(function () {17 ????????????$("button").click(function () {18 ????????????????$("div").fadeIn(2000);19 ????????????});20 ????????})21 ????</script>22 </head>23 <body>24 ????<button>淡入</button>25 ????<div></div>26 </body>27 </html>1.3 带String参数的淡入动画
格式：
$(selector).fadeIn(String);
参数(String): 参数有三个值可选， 分别是slow(600ms)， normal(400ms)， fast(200ms)。
示例代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeIn() Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????display: none;11 ????????????background-color: #ff6700;12 ????????}13 ????</style>14 ????<script type="text/javascript" src="jquery.js"></script>15 ????<script>16 ????????$(function () {17 ????????????$("button").click(function () {18 ????????????????//以slow speed fadein19 ????????????????$("div").fadeIn("slow");20 ????????????????//以normal speed fadein21 ????????????????$("div").fadeIn("normal");22 ????????????????//以fast speed fadein23 ????????????????$("div").fadeIn("fast");24 ????????????});25 ????????})26 ????</script>27 </head>28 <body>29 ????<button>淡入</button>30 ????<div></div>31 </body>32 </html>1.4. 带callback的淡入动画
格式：
$(selector).fadeIn(speed, callback);
示例代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeIn() Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????display: none;11 ????????????background-color: #ff6700;12 ????????}13 ????</style>14 ????<script type="text/javascript" src="jquery.js"></script>15 ????<script>16 ????????$(function () {17 ????????????$("button").click(function () {18 ????????????????$("div").fadeIn(2000, function () {19 ????????????????????alert("fadeIn执行完毕！");20 ????????????????});21 ????????????});22 ????????})23 ????</script>24 </head>25 <body>26 ????<button>淡入</button>27 ????<div></div>28 </body>29 </html>2. fadeOut()
格式：
$(selector).fadeOut(speed, callback);
返回值： jQuery
作用： 通过淡出的方式隐藏匹配元素
参数(speed)：控制隐藏匹配参数的速度， 此参数有三种情况。
（1）省略不写。 当speed省略不写时， 默认使用400ms的速度淡出。
（2）以number作为参数。 此参数为毫秒数， 1000ms = 1s。
（3）以String作为参数。 有3种值可选， 分别是slow(600ms), normal(400ms), fast(200ms)。
参数(callback)： 在执行完淡出操作后， 执行的函数。
示例代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeOut() Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????display: block;11 ????????????background-color: #ff6700;12 ????????}13 ????</style>14 ????<script type="text/javascript" src="jquery.js"></script>15 ????<script>16 ????????$(function () {17 ????????????$("button").click(function () {18 ????????????????$("div").fadeOut();19 ????????????});20 ????????})21 ????</script>22 </head>23 <body>24 ????<button>淡出</button>25 ????<div></div>26 </body>27 </html> 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeOut(Number) Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????display: block;11 ????????????background-color: #ff6700;12 ????????}13 ????</style>14 ????<script type="text/javascript" src="jquery.js"></script>15 ????<script>16 ????????$(function () {17 ????????????$("button").click(function () {18 ????????????????$("div").fadeOut(1000);19 ????????????});20 ????????})21 ????</script>22 </head>23 <body>24 ????<button>淡出</button>25 ????<div></div>26 </body>27 </html> 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeOut(Number) Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????display: block;11 ????????????background-color: #ff6700;12 ????????}13 ????</style>14 ????<script type="text/javascript" src="jquery.js"></script>15 ????<script>16 ????????$(function () {17 ????????????$("button").click(function () {18 ????????????????$("div").fadeOut(1000);19 ????????????});20 ????????})21 ????</script>22 </head>23 <body>24 ????<button>淡出</button>25 ????<div></div>26 </body>27 </html> 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeOut(Number) Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????display: block;11 ????????????background-color: #ff6700;12 ????????}13 ????</style>14 ????<script type="text/javascript" src="jquery.js"></script>15 ????<script>16 ????????$(function () {17 ????????????$("button").click(function () {18 ????????????????$("div").fadeOut(1000, function () {19 ????????????????????alert("fadeOut动画执行完毕！")20 ????????????????});21 ????????????});22 ????????})23 ????</script>24 </head>25 <body>26 ????<button>淡出</button>27 ????<div></div>28 </body>29 </html>3. fadeToggle()
格式：
$(selector).fadeToggle(speed, callback);
返回值： jQuery
作用： 在淡入动画和淡出动画之间进行切换。 当元素隐藏时， 以淡入形式显示元素。 当元素显示时， 以淡出形式隐藏动画。
参数(speed)：控制隐藏匹配参数的速度， 此参数有三种情况。
（1）省略不写。 当speed省略不写时， 默认使用400ms的速度改变透明度。
（2）以number作为参数。 此参数为毫秒数， 1000ms = 1s。
（3）以String作为参数。 有3种值可选， 分别是slow(600ms), normal(400ms), fast(200ms)。
参数(callback)： 在执行完淡出操作后， 执行的函数。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeToggle() Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????display: block;11 ????????????background-color: red;12 ????????}13 ????</style>14 ????<script type="text/javascript" src="jquery.js"></script>15 ????<script type="text/javascript">16 ????????$(function () {17 ????????????$("button").click(function () {18 ????????????????$("div").fadeToggle(2000, function () {19 ????????????????????alert("动画执行完毕！");20 ????????????????});21 ????????????});22 ????????})23 ????</script>24 </head>25 <body>26 ????<button>切换</button>27 ????<div></div>28 </body>29 </html>4. fadeTo()
$(selector).fadeTo(speed, opacity, callback);
返回值： jQuery
作用： 将被选元素的不透明度逐渐更改为指定的值
参数(speed)：可选， 控制隐藏匹配参数的速度， 此参数有三种情况。
（1）省略不写。 当speed省略不写时， 默认使用400ms的速度淡出。
（2）以number作为参数。 此参数为毫秒数， 1000ms = 1s。
（3）以String作为参数。 有3种值可选， 分别是slow(600ms), normal(400ms), fast(200ms)。
参数(opacity): 必选， 规定淡入或者淡出的透明度。必须是介于0.00~1.00之间的数字。
参数(callback)： 可选， fadeTo函数执行完之后，要执行的函数。
如果没有设置speed， 那么就不能设置callback。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeTo Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????opacity: 1.0;11 ????????????background-color: #ff6700;12 ????????}13 ????</style>14 ????<script type="text/javascript" src="jquery.js"></script>15 ????<script type="text/javascript">16 ????????$(function () {17 ????????????$("button").click(function () {18 ????????????????$("div").fadeTo(1000, 0.5, function () {19 ????????????????????alert("fadeTo 执行完毕！");20 ????????????????????})21 ????????????});22 ????????})23 ????</script>24 </head>25 <body>26 ????<button>透明度</button>27 ????<div></div>28 </body>29 </html>5. 淡入淡出示例代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>fadeIn() fadeOut() fadeToggle() Demo</title> 6 ????<style type="text/css"> 7 ????????div{ 8 ????????????width: 300px; 9 ????????????height: 300px;10 ????????????display: none;11 ????????????opacity: 1;12 ????????????background-color: red;13 ????????}14 ????</style>15 ????<script type="text/javascript" src="jquery.js"></script>16 ????<script type="text/javascript">17 ????????$(function () {18 ????????????$("button:eq(0)").click(function () {19 ???????????????$("div").fadeIn(2000, function () {20 ???????????????????alert("fadeIn 执行完毕！");21 ???????????????})22 ????????????});23 24 ????????????$("button:eq(1)").click(function () {25 ????????????????$("div").fadeOut(2000, function () {26 ????????????????????alert("fadeOut执行完毕");27 ????????????????})28 ????????????});29 30 ????????????$("button:eq(2)").click(function () {31 ????????????????$("div").fadeToggle(2000, function () {32 ????????????????????alert("fadeToggle执行完毕")33 ????????????????})34 ????????????});35 36 ????????????$("button:eq(3)").click(function () {37 ????????????????$("div").fadeTo(1000, 0.5, function () {38 ????????????????????alert("透明度执行完毕！")39 ????????????????});40 ????????????});41 ????????})42 ????</script>43 </head>44 <body>45 ????<button>淡入</button>46 ????<button>淡出</button>47 ????<button>切换</button>48 ????<button>透明度</button>49 ????<div></div>50 </body>51 </html>JQuery动画之淡入淡出动画
原文地址：https://www.cnblogs.com/yang-wei/p/9514526.html