jQuery如何制作動畫
阿新 • • 發佈：2018-08-21
w3c size line float idt anim class www -c
.welcome{font-size:50px;color:Red;font-weight:bold;margin-top:220px;text-align:center;}
#coverbox{position:absolute;left:0px;top:100px;background-color:#e5e5e5;height:500px;width:100%;}
#coverbox #leftbox,#coverbox #rightbox{width:49%;height:500px;background-color:#ee00aa;}
#coverbox #leftbox{border-right:1px solid red;float:left;}
#coverbox #rightbox{border-left:1px solid red;float:right;}
</style>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function ()
{
$(document).click(function ()
{
$("#leftbox,#rightbox").animate({ width: -1 + "px" }, 4000, function ()
{
$("#coverbox").fadeOut(3000);
});
});
});
</script>
</head>
<body style="font-size:12px;">
<div class="box">
<ol>
<li>實現拉幕效果，點擊灰色區域時，左右兩部分分別向兩側移動</li>
<li>拉幕效果完成之後，逐漸顯示：歡迎進入Jquery動畫世界</li>
</ol>
</div>
<div class="welcome">歡迎進入Jquery動畫世界</div>
<div id="coverbox">
<div id="leftbox"></div>
<div id="rightbox"></div>
</div>
</body>
</html>
好了，一個簡單的動畫制作完成了
下面為一組圖片（四張）展示
1
2
3
4
頁面代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.box{border:1px solid #aaccff;margin-top:10px;padding:10px;line-height:25px;}
.welcome{font-size:50px;color:Red;font-weight:bold;margin-top:220px;text-align:center;}
#coverbox{position:absolute;left:0px;top:100px;background-color:#e5e5e5;height:500px;width:100%;}
#coverbox #leftbox,#coverbox #rightbox{width:49%;height:500px;background-color:#ee00aa;}
#coverbox #leftbox{border-right:1px solid red;float:left;}
#coverbox #rightbox{border-left:1px solid red;float:right;}
</style>
<script type="text/javascript" src="Scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function ()
{
$(document).click(function ()
{
$("#leftbox,#rightbox").animate({ width: -1 + "px" }, 4000, function ()
{
$("#coverbox").fadeOut(3000);
});
});
});
</script>
</head>
<body style="font-size:12px;">
<div class="box">
<ol>
<li>實現拉幕效果，點擊灰色區域時，左右兩部分分別向兩側移動</li>
<li>拉幕效果完成之後，逐漸顯示：歡迎進入Jquery動畫世界</li>
</ol>
</div>
<div class="welcome">歡迎進入Jquery動畫世界</div>
<div id="coverbox">
<div id="leftbox"></div>
<div id="rightbox"></div>
</div>
</body>
</html>
好了，一個簡單的動畫制作完成了
jQuery如何制作動畫