摘要：移動的速度 以及移動停止后的變化<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">/* .red{color:
移動的速度 以及移動停止后的變化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .red{color: pink}
.oks{font-weight: bold;font-size: 35px;} */
div{width: 150px;height: 150px;position: absolute;background: pink;}
#suo{background-color: pink;}
</style>
<script type="text/javascript"src="js/jquery-3.3.1.min.js"></script>
</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ī)定是否應該清除動畫隊列。默認是 false 僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行
// 可選的參數(shù) goToEnd 規(guī)定是否立即完成當前動畫。默認是 false
// 默認情況下 stop() 會清除在被選元素上指定的當前動畫
$(document).ready(function(){
$('#right').click(function(){ //ruid被點擊了
$('#suo').animate({left:'+800px'},5000)
$('#suo').animate({color:'#ccc'},300)
})
$('#tingzhi').click(function(){
$('#suo').stop()
}) //上下切換
})
</script>
<button id="right">右移</button>
<button id="tingzhi">停止</button>
<div id="suo">我是一個元素</div>
</body>
</html>
批改老師：韋小寶批改時間：2018-12-20 13:37:34
老師總結(jié)：寫的很不錯！注釋的也很清晰！jquery中的動畫還是蠻好玩的！課后記得多練習哦！