abstrakt：<!DOCTYPE html><html><head> <title>jquery動畫</title> <meta charset="utf-8"> <style type="text/css"> .clear{clear: both;} </style> &l
<!DOCTYPE html>
<html>
<head>
<title>jquery動畫</title>
<meta charset="utf-8">
<style type="text/css">
.clear{clear: both;}
</style>
<script type="text/javascript" src="jquery-3.4.0.min.js"></script>
<script >
// 測試一:隱藏和顯示
$(document).ready(function(){
$('#bu1').click(function(){
$('div').hide()
})
$('.bu2').click(function(){
$('div').show()
})
// 測試2：滑動
$('.bu3').click(function(){
$('.s1').slideUp(100)
})
})
</script>
</head>
<body>
<!-- 測試一:隱藏和顯示 -->
<button id="bu1">隱藏</button>
<input class="bu2" type="button" name="" value="顯示">
<div style="width: 100px;height: 100px;background: lightblue;margin-top: 10px"></div>
<br>
<hr>
<!-- 測試2：滑動 -->
<div style="width: 400px;margin-top: 15px">
<div style="float: left;">
<button class="bu3" style="margin-bottom: 10px">上拉</button><br>
<span class="s1">今天天氣很好訥，終于出太陽了</span><br>
<span class="s1">今天天氣很好訥，終于出太陽了</span><br>
<span class="s1">今天天氣很好訥，終于出太陽了</span><br>
</div>
<div style="float: left;margin-left: 20px">
<button class="bu4" style="margin-bottom: 12px">下拉</button><br>
<span style="display: block;width: 100px;height: 60px;background: lightgreen;"></span>
</div>
<div class="clear"></div>
</div>
</body>
</html>
隱藏和顯示的demo
運行結(jié)果
滑動demo
運行結(jié)果
淡入淡出demo
運行結(jié)果
自定義動畫demo
運行結(jié)果
Korrigierender Lehrer：查無此人Korrekturzeit：2019-04-29 09:13:54
Zusammenfassung des Lehrers：完成的不錯，jq每行語句結(jié)束后增加;號。繼續(xù)加油