abstrakt：<!DOCTYPE html> <html> <head> <title>jQuery的animate()方法來自定義動畫</title> <script type="text/javascript" src="jquery-3.3.1.min.js">
<!DOCTYPE html>
<html>
<head>
<title>jQuery的animate()方法來自定義動畫</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()方法來自定義動畫
//語法:$(selector).animate({params},speed,fn);
//params參數(shù)定義形成動畫的css屬性是必需的
// 停止動畫：
// stop()方法用于停止動畫或效果，在它他完成之前，這個方法適用于所有的jQuery
//效果函數(shù)，包括滑動、淡入淡出和自定義動畫
// $(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">點擊字體放大</button>
<p>444444444點擊字體放大44444444444</p>
<button class="bt2">點擊移動DIV</button>
<div></div> -->
<!-- 點擊右移按鈕，div右移，點擊停止按鈕當(dāng)前效果停止 -->
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="div1">PHP中文網(wǎng)</div>
</body>
</html>
Korrigierender Lehrer：滅絕師太Korrekturzeit：2018-12-01 09:28:29
Zusammenfassung des Lehrers：測試的上課代碼，比較簡單，限次要找點案例試試手奧！