abstract：<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="css/jquery-3.3.1.min.js"></script> <style
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="css/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
.main{width: 200px; height:225px; float:left; }
.box1,.box2,.box3,.box4,.box5,.box6{width: 200px;height:200px;border:1px solid #ccc; background: red;position: absolute;}
/*.box1{display: none;}*/
p{width: 200px;height: 20px;text-align: center; margin-top: 2px;}
</style>
<script type="text/javascript">
$(function(){
// $('.box1').css('display','none')
- // $('.but1').click(function(){
- // $('.box1').fadeIn(1000)
- // })
- //$('.but2').click(function(){
- // $('.box2').fadeOut(1000)
- // })
-
- // $('.box1').hover(
- // function(){
- // $(this).fadeOut(3000)
- // },
- // function(){
- // $(this).fadeIn(3000)
- // })
- // })
+
$('.but3').click(function(){
$('.box3').fadeToggle()
})
$('.but4').click(function(){
$('.box4').fadeTo(1000,0.2)
})
$('.but5').click(function(){
$('.box5').animate({height:'400px'},1500)
})
$('.but6').click(function(){
$('.box6').animate({left:'1206'},1500)
$('.box6').animate({ opacity:'0.3'},1500)
$('.box6').animate({height:'540px'},1500)
})
$('.but7').click(function(){
$('.box6').stop(true,true)
})
})
</script>
</head>
<body>
<div class="main">
<p><button class="but1">淡 1 入</button></p>
<div class="box1"></div>
</div>
<div class="main">
<p><button class="but2">淡 2 出</button></p>
<div class="box2"></div>
<br>
</div>
<div class="main">
<p><button class="but3">切 3 换</button></p>
<div class="box3"></div>
<br>
</div>
<div class="main">
<p><button class="but4">切 4 换</button></p>
<div class="box4"></div>
<br>
</div>
<div class="main">
<p><button class="but5">放 5 大</button></p>
<div class="box5"></div>
<br>
</div>
</div>
<div cla
ss="main">
<p><button class="but6">移 6 动</button></p>
<div class="box6"></div>
<br>
</div>
<div class="main">
<p><button class="but7">stop</button></p>
<br>
</div>
</body>
</html>
Correcting teacher：西门大官人Correction time：2019-04-08 10:20:01
Teacher's summary：思考一下，jquery的动画底层原理是什么？