摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq動(dòng)畫(huà)</title><script type="text/javascript" src="js/jq_3.3.1_mi.js"></
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq動(dòng)畫(huà)</title>
<script type="text/javascript" src="js/jq_3.3.1_mi.js"></script>
<style>
.box1{width: 200px;height: 150px;background:#0E8AF0;color: #fff;position: absolute; margin-top: 5px;}
</style>
</head>
<body>
<button id="down">下移</button>
<button id="stop">停止</button>
<div>這是box1</div>
<script type="text/javascript">
$(document).ready(function () {
$('#down').click(function(){//獲取下移按鈕
$('.box1').animate({top:'+200px'},1000)//box1向下移動(dòng)200px，時(shí)間1000ms
$('.box1').animate({fontSize:'30px'},300)
})
$('#stop').click(function(){//獲取停止按鈕
$('.box1').stop(true)//使box1停止
})
})
</script>
</body>
</html>
本作業(yè)涉及的知識(shí)點(diǎn)：
Jq的動(dòng)畫(huà)效果—自定義動(dòng)畫(huà)
jQuery中我們使用 animate()方法創(chuàng)建自定義的動(dòng)畫(huà)
語(yǔ)法:$(selector).animate({params},speed,fn);
必需的 params 參數(shù)定義形成動(dòng)畫(huà)的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
可選的 fn是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)
停止動(dòng)畫(huà)：
stop() 方法用于停止動(dòng)畫(huà)或效果，在它們完成之前； 該方法適用于所有 jQuery 效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫(huà)
語(yǔ)法:
$(selector).stop(stopAll,goToEnd)
可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列。默認(rèn)是 false 僅停止活動(dòng)的動(dòng)畫(huà)，允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行
可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動(dòng)畫(huà)。默認(rèn)是 false
默認(rèn)情況下 stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫(huà)
Jq的隱藏
Hide（）隱藏顯示的元素
格式：hide([speed[] [sesing] [fn])
Speed:隱藏過(guò)程的速度，speed是毫秒值
Sesing：指定切換的效果
對(duì)于js、jq的知識(shí)點(diǎn)掌握仍然不好，看老師的例子能看懂，自己寫(xiě)出來(lái)還是不會(huì)，還得多練習(xí)
批改老師：天蓬老師批改時(shí)間：2019-02-11 11:33:27
老師總結(jié)：對(duì)于動(dòng)畫(huà)函數(shù)來(lái)說(shuō), 參數(shù)類(lèi)型要注意, 必須是對(duì)象字面量, 還有從多的參數(shù), 也是需要記憶的