首頁 > 開發者 > JavaScript
複製代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>動畫效果</title>
<%--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--%>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#begin").click(function () {
for (var i = 0; i < 5; i++) {
$("div").animate({
left: '250px',
opacity: '0.5',//透明度
height: '150px',
width: '150px'
}, 'slow');
$("#sec").show('slow');
$("div").animate({
left: '0px',
opacity: '1',
height: '100px',
width: '100px'
}, 'slow');
$("#sec").hide('slow');
}
});
//停止當前動畫，跳入下一個動畫
$("#stop").click(function () {
$("div").stop();
})
//停止所有動畫，保持目前狀態
$("#stop1").click(function () {
$("div").stop(true,false);
})
//停止所有動畫，跳到當前動畫終點
$("#stop2").click(function () {
$("div").stop(true, true);
})
/*
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。預設是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。預設是 false。
因此，預設地，stop() 會清除在被選元素上指定的當前動畫。
下面的例子示範 stop() 方法，不帶參數：
執行個體
*/
});
</script>
</head>
<body>
<button id="begin">開始動畫</button> <button id="stop">停止當前動畫，進入下一個動畫</button>
<button id="stop1">瞬間停止</button><button id="stop2">停止所有動畫，跳到當前動畫終點</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
<p id="sec" style="display:none;">第二次才顯示</p>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
