abstract：<!DOCTYPE html> <html> <head> <title>jQuery的animate()方法來(lái)自定義動(dòng)畫</title> <script type="text/javascript" src="jquery-3.3.1.min.js">
<!DOCTYPE html>
<html>
<head>
<title>jQuery的animate()方法來(lái)自定義動(dòng)畫</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 200px;height: 200px;background: red;position: absolute;}
</style>
<script type="text/javascript">
//在jQuery中用 animate()方法來(lái)自定義動(dòng)畫
//語(yǔ)法:$(selector).animate({params},speed,fn);
//params參數(shù)定義形成動(dòng)畫的css屬性是必需的
// 停止動(dòng)畫：
// stop()方法用于停止動(dòng)畫或效果，在它他完成之前，這個(gè)方法適用于所有的jQuery
//效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫
// $(document).ready(function () {
// $('.bt1').click(function () {
// $('p').animate({fontSize:'40px'},1500);
// //屬性名稱中有-的，全部寫成駝峰寫法
// })
// $('.bt2').click(function () {
// $('div').animate({left:'200px',top:'200px',background:'blue'},1500)
// })
// })
$(document).ready(function () {
$('#right').click(function () {
$('.div1').animate({left:'+200px'},500);
$('.div1').animate({fontSize:'30px'},3000);
})
$('#stop').click(function () {
$('.div1').stop();
})
})
</script>
</head>
<body>
<!-- <button class="bt1">點(diǎn)擊字體放大</button>
<p>444444444點(diǎn)擊字體放大44444444444</p>
<button class="bt2">點(diǎn)擊移動(dòng)DIV</button>
<div></div> -->
<!-- 點(diǎn)擊右移按鈕，div右移，點(diǎn)擊停止按鈕當(dāng)前效果停止 -->
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="div1">PHP中文網(wǎng)</div>
</body>
</html>
Correcting teacher：滅絕師太Correction time：2018-12-01 09:28:29
Teacher's summary：測(cè)試的上課代碼，比較簡(jiǎn)單，限次要找點(diǎn)案例試試手奧！