摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ動畫效果</title> <script type="text/javascript" src="jquer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ動畫效果</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
.box{position: absolute;width: 100px;height: 200px;background: red}
</style>
</head>
<body>
<script type="text/javascript">
// JQuery中我們使用animate()方法創(chuàng)建自定義的動畫
// 語法：$(selector).animate({params},speed,fn);
// 必需的 params 參數(shù)定義形成動畫的css屬性
// 可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow,fast"或者毫秒
// 可選的 fn是動畫完成后所執(zhí)行的函數(shù)
// stop()方法用于停止動畫或者效果，在它們完成之前 該方法適用于所有JQuery 效果函數(shù)，包括滑動，淡入淡出和自定義動畫
// 語法：$(selector).stop(stopAll,goToEnd)
// 可選參數(shù) stopAll 規(guī)定是否應(yīng)該清除動畫隊列。默認是false 僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行
// 可選參數(shù)goToEnd 規(guī)定是否立即完成當(dāng)前動畫。默認是false
// 默認情況下 stop() 會清除在被選元素上指定的當(dāng)前動畫
$(function(){
$('.btn1').click(function(){
$('p').animate({fontSize:'30px',color:'red'},1500)
})
$('.btn2').click(function(){
$('.box').animate({
left:'200px',
background:'blue',
opacity:0.6,
width:'400px',
height:'toggle'
},1500)
})
$('#right').click(function(){
$('.box').animate({left:'+=300px'},3000)
$('.box').animate({fontSize:'+=10px'},800)
})
$('#stop').click(function(){
$('.box').stop(true,true)
})
})
</script>
<button>點擊字體放大</button>
<button>點擊字體放大</button>
<button id="stop">停止</button>
<button id="right">右移</button>
<p>JQuery中我們使用animate()方法創(chuàng)建自定義的動畫</p>
<div>PHP中文網(wǎng)</div>
</body>
</html>
批改老師：滅絕師太批改時間：2018-10-29 17:31:58
老師總結(jié)：美滋滋，棒