前言
jQuery提供的一組網頁中常見的動畫效果，這些動畫是標準的、有規律的效果；同時還提供給我們了自定義動畫的功能。
顯示動畫
方式一：
$("div").show();
解釋：無參數，表示讓指定的元素直接顯示出來。其實這個方法的底層就是通過display: block;實現的。
方式二：
$("div").show(2000);
解釋：通過控制元素的寬高、透明度、display屬性，逐漸顯示，2秒後顯示完畢。
效果如下：
方式三：
$("div").show("slow");
參數可以是：
-
slow 慢：600ms
-
normal 正常：400ms
-
fast 快：200ms
解釋：和方式二類似，也是通過控制元素的寬高、透明度、display屬性，逐漸顯示。
方式四：
//show(毫秒值，回調函數;
$("div").show(5000,function () {
alert("動畫執行完畢！");
});
解釋：動畫執行完後，立即執行回調函數。
總結：
上面的四種方式幾乎一致：參數可以有兩個，第一個是動畫的執行時長，第二個是動畫結束後執行的回調函數。
隱藏動畫
方式參照上面的show()方法的方式。如下：
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function(){});
顯示和隱藏的來回切換：
顯示和隱藏的來回切換採用的是toggle()方法：就是先執行show()，再執行hide()。
同樣是四種方式：
$(selector).toggle();
滑入和滑出
1、滑入動畫效果：（類似於生活中的捲簾門）
$(selector).slideDown(speed, 回調函數);
解釋：下拉動畫，顯示元素。
注意：省略參數或者傳入不合法的字符串，那麼則使用默認值：400毫秒（同樣適用於fadeIn/slideDown/slideUp）
2 滑出動畫效果：
$(selector).slideUp(speed, 回調函數);
解釋：上拉動畫，隱藏元素。
3、滑入滑出切換動畫效果：
$(selector).slideToggle(speed, 回調函數);
參數解釋同show()方法。
舉例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//點擊按鈕後產生動畫
$("button:eq(0)").click(function () {
//滑入動畫： slideDown(毫秒值，回調函數[顯示完畢執行什麼]);
$("div").slideDown(2000, function () {
alert("動畫執行完畢！");
});
})
//滑出動畫
$("button:eq(1)").click(function () {
//滑出動畫：slideUp(毫秒值，回調函數[顯示完畢後執行什麼]);
$("div").slideUp(2000, function () {
alert("動畫執行完畢！");
});
})
$("button:eq(2)").click(function () {
//滑入滑出切換（同樣有四種用法）
$("div").slideToggle(1000);
})
})
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切換</button>
<div></div>
</body>
</html>
淡入淡出動畫
1、淡入動畫效果：
$(selector).fadeIn(speed, callback);
作用：讓元素以淡淡的進入視線的方式展示出來。
2、淡出動畫效果：
$(selector).fadeOut(1000);
作用：讓元素以漸漸消失的方式隱藏起來
3、淡入淡出切換動畫效果：
$(selector).fadeToggle('fast', callback);
作用：通過改變透明度，切換匹配元素的顯示或隱藏狀態。
參數的含義同show()方法。
代碼舉例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
display: none;
/*opacity: 1;*/
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//點擊按鈕後產生動畫
$("button:eq(0)").click(function () {
// //淡入動畫用法1: fadeIn(); 不加參數
$("div").fadeIn();
// //淡入動畫用法2: fadeIn(2000); 毫秒值
// $("div").fadeIn(2000);
// //通過控制 透明度和display
//淡入動畫用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeIn("slow");
// $("div").fadeIn("fast");
// $("div").fadeIn("normal");
//淡入動畫用法4: fadeIn(毫秒值，回調函數[顯示完畢執行什麼]);
// $("div").fadeIn(5000,function () {
// alert("動畫執行完畢！");
// });
})
//滑出動畫
$("button:eq(1)").click(function () {
// //滑出動畫用法1: fadeOut(); 不加參數
// $("div").fadeOut();
// //滑出動畫用法2: fadeOut(2000); 毫秒值
// $("div").fadeOut(2000); //通過這個方法實現的：display: none;
// //通過控制 透明度和display
//滑出動畫用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeOut("slow");
// $("div").fadeOut("fast");
// $("div").fadeOut("normal");
//滑出動畫用法1: fadeOut(毫秒值，回調函數[顯示完畢執行什麼]);
// $("div").fadeOut(2000,function () {
// alert("動畫執行完畢！");
// });
})
$("button:eq(2)").click(function () {
//滑入滑出切換
//同樣有四種用法
$("div").fadeToggle(1000);
})
$("button:eq(3)").click(function () {
//改透明度
//同樣有四種用法
$("div").fadeTo(1000, 0.5, function () {
alert(1);
});
})
})
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切換</button>
<button>改透明度爲0.5</button>
<div></div>
</body>
</html>
自定義動畫
$(selector).animate({params}, speed, callback);
作用：執行一組CSS屬性的自定義動畫。
-
第一個參數表示：要執行動畫的CSS屬性（必選）
-
第二個參數表示：執行動畫時長（可選）
-
第三個參數表示：動畫執行完後，立即執行的回調函數（可選）
代碼舉例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
};
//自定義動畫
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("動畫執行完畢！");
});
});
})
})
</script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>
停止動畫
$(selector).stop(true, false);
裏面的兩個參數，有不同的含義。
第一個參數：
-
true：後續動畫不執行。
-
false：後續動畫會執行。
第二個參數：
-
true：立即執行完成當前動畫。
-
false：立即停止當前動畫。
PS：參數如果都不寫，默認兩個都是false。實際工作中，直接寫stop()用的多。
效果演示：
當第二個參數爲true時，效果如下：
當第二個參數爲false時，效果如下：
這個後續動畫我們要好好理解，來看個例子。
案例：鼠標懸停時，彈出下拉菜單（下拉時帶動畫）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-color: pink;
}
.wrap li {
background-color: green;
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//入口函數
$(document).ready(function () {
//需求：鼠標放入一級li中，讓他裏面的ul顯示。移開隱藏。
var jqli = $(".wrap>ul>li");
//綁定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
});
//綁定事件(移開隱藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一級菜單1</a>
<ul>
<li><a href="javascript:void(0);">二級菜單1</a></li>
<li><a href="javascript:void(0);">二級菜單2</a></li>
<li><a href="javascript:void(0);">二級菜單3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一級菜單1</a>
<ul>
<li><a href="javascript:void(0);">二級菜單1</a></li>
<li><a href="javascript:void(0);">二級菜單2</a></li>
<li><a href="javascript:void(0);">二級菜單3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一級菜單1</a>
<ul>
<li><a href="javascript:void(0);">二級菜單1</a></li>
<li><a href="javascript:void(0);">二級菜單2</a></li>
<li><a href="javascript:void(0);">二級菜單3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果如下：
上方代碼中，關鍵的地方在於，用了stop函數，再執行動畫前，先停掉之前的動畫。
如果去掉stop()函數，效果如下：（不是我們期望的效果）
stop方法的總結
當調用stop()方法後，隊列裏面的下一個動畫將會立即開始。
但是，如果參數clearQueue被設置爲true，那麼隊列面剩餘的動畫就被刪除了，並且永遠也不會執行。
如果參數jumpToEnd被設置爲true，那麼當前動畫會停止，但是參與動畫的每一個CSS屬性將被立即設置爲它們的目標值。比如：slideUp()方法，那麼元素會立即隱藏掉。如果存在回調函數，那麼回調函數也會立即執行。
注意：如果元素動畫還沒有執行完，此時調用stop()方法，那麼動畫將會停止。並且動畫沒有執行完成，那麼回調函數也不會被執行。
舉例：右下角的彈出廣告
代碼實現：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ad {
position: fixed;
right: 0;
bottom: 0;
width: 230px;
height: 120px;
background-image: url(images/ad.jpg);
display: none;
}
.ad span {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 18px;
background-image: url(images/h.jpg);
cursor: pointer;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//需求：然廣告ad部分，先滑入，在滑出，在淡入。然後綁定事件，點擊span彈出
//步驟：
$(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {
$(this).parent().fadeOut(1000);
});
//第二種寫法
// $(".ad").slideDown(1000, function () {
// $(".ad").slideUp(1000, function () {
// $(".ad").fadeIn(1000, function () {
// $(".ad").children("span").click(function () {
// $(this).parent().fadeOut(1000, function () {
// alert("執行完畢！");
// });
// });
// });
// });
// })
})
</script>
</head>
<body>
<div class="ani">我是內容</div>
<div class="ad">
<span></span>
</div>
</body>
</html>
效果如下：
