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