サマリー： <!DOCTYPE html> <html> <head charset='utf-8'> <title>jq淡入淡出效果!</title> <script type="text/javascript" src="css/jquer
<!DOCTYPE html>
<html>
<head charset='utf-8'>
<title>jq淡入淡出效果!</title>
<script type="text/javascript" src="css/jquery-3.4.1.min.js"></script>
<style type="text/css">
.box1{height: 200px;width: 200px;background:red;}
.box2{height: 200px;width: 200px;background:red;position: absolute;}
button{height: 40px;width: 200px;border:none;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('.box1').hide()
$('.but1').click(function(){
$('.box1').fadeIn(3000)
$('p').animate({fontSize:'40px'},1500)
$('.box2').animate({left:'400px'},1500)
})
// body...
$('#rigth').click(function(){
$('.box2').animate({left:'+500px'},3000)
})
$('#stop').click(function(){
$('.box2').stop()
})
})
</script>
<button class="but1">淡入</button>
<div class="box1"></div>
<p>jq當(dāng)中我們使用的是自定義動(dòng)畫效果@</p>
<div class="box2">php中文網(wǎng)</div>
<button id="rigth">向右移動(dòng)</button>
<button id="stop">停止移動(dòng)</button>
</body>
</html>
添削の先生：查無此人添削時(shí)間：2019-06-26 14:52:32
先生のまとめ：完成的不錯(cuò)。每行js和jq語句結(jié)束增加;號。繼續(xù)加油