abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jq動(dòng)畫</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)畫</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)畫效果—自定義動(dòng)畫
jQuery中我們使用 animate()方法創(chuàng)建自定義的動(dòng)畫
語法:$(selector).animate({params},speed,fn);
必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 fn是動(dòng)畫完成后所執(zhí)行的函數(shù)
停止動(dòng)畫:
stop() 方法用于停止動(dòng)畫或效果,在它們完成之前; 該方法適用于所有 jQuery 效果函數(shù),包括滑動(dòng)、淡入淡出和自定義動(dòng)畫
語法:
$(selector).stop(stopAll,goToEnd)
可選的參數(shù) stopAll 規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。默認(rèn)是 false 僅停止活動(dòng)的動(dòng)畫,允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行
可選的參數(shù) goToEnd 規(guī)定是否立即完成當(dāng)前動(dòng)畫。默認(rèn)是 false
默認(rèn)情況下 stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫
Jq的隱藏
Hide()隱藏顯示的元素
格式:hide([speed[] [sesing] [fn])
Speed:隱藏過程的速度,speed是毫秒值
Sesing:指定切換的效果
對(duì)于js、jq的知識(shí)點(diǎn)掌握仍然不好,看老師的例子能看懂,自己寫出來還是不會(huì),還得多練習(xí)
Correcting teacher:天蓬老師Correction time:2019-02-11 11:33:27
Teacher's summary:對(duì)于動(dòng)畫函數(shù)來說, 參數(shù)類型要注意, 必須是對(duì)象字面量, 還有從多的參數(shù), 也是需要記憶的