<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>48-jQuery的stop和delay方法</title>
<style>
*{
margin: 0;
padding: 0;
}
.one{
width: 100px;
height: 100px;
background: red;
}
.two{
width: 500px;
height: 10px;
background: blue;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 編寫jQuery相關代碼
$("button").eq(0).click(function () {
/*
在jQuery的{}中可以同時修改多個屬性, 多個屬性的動畫也會同時執行
*/
/*
$(".one").animate({
width: 500
// height: 500
}, 1000);
$(".one").animate({
height: 500
}, 1000);
*/
/*
delay方法的作用就是用於告訴系統延遲時長
$(".one").animate({
width: 500
// height: 500
}, 1000).delay(2000).animate({
height: 500
}, 1000);
*/
$(".one").animate({
width: 500
}, 1000);
$(".one").animate({
height: 500
}, 1000);
$(".one").animate({
width: 100
}, 1000);
$(".one").animate({
height: 100
}, 1000);
});
$("button").eq(1).click(function () {
// 立即停止當前動畫, 繼續執行後續的動畫
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);
// 立即停止當前和後續所有的動畫
// $("div").stop(true);
// $("div").stop(true, false);
// 立即完成當前的, 繼續執行後續動畫
// $("div").stop(false, true);
// 立即完成當前的, 並且停止後續所有的
$("div").stop(true, true);
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<button>停止動畫</button>
<div class="one" style="display: none"></div>
<div class="two"></div>
</body>
</html>
48-jQuery的stop和delay方法
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.