jQuery動畫之顯示動畫
阿新 • • 發佈：2018-08-18
wid class col alert 解釋 實現 eight 使用 pan
顯示動畫
以下面一個代碼示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery顯示動畫</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ff6700;
display: none;
}
顯示動畫的方式有三種方式
方式一：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(".box").show();
</script>
解釋：使用show()， 不帶有參數， 表示讓指定的元素直接顯示出來。
其實這個方法的底層就是通過display：block;實現。
方式二：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//在3秒內逐漸顯示
$(".box").show(3000);
</script>
解釋： 使用show(數值)， 表示在一定時間之內， 逐漸顯示出來。
這種方法是通過控制元素的寬高、透明度、display屬性來說實現的。
方式三：
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function () { $(".box").show("slow"); }) </script>
解釋： 通過參數， 使用show(), 參數可以為：
(1) slow(慢)： 600ms;
(2) normal(普通)： 400ms；
(3) fast(快)： 200ms;
通過這種方式調用show()， 也是空過控制元素的寬高、透明度、display屬性來實現的。
補充：在動畫執行完畢後， 執行另外的程序
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function () {
$(".box").show("faster", function () {
alert("動畫執行完畢")
});
})
</script>
解釋： 這種方式， 是在show()中加入了一個函數， 當show()執行完畢後， 就會執行此函數。
可以在方式一、方式二、方式三中都可以加入此函數。
jQuery動畫之顯示動畫