<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{margin:100px 100px; float: left;}
#box1,#box2,#box3,#box4,#box5{height: 400px;width: 200px;border:1px solid #ccc;float:left;background-color: red}
.no1{width: 200px;height: 400px;background-color: #393939;opacity: 0.4;line-height: 400px;color: #fff;text-align: center;font-size: 12px}
.no2{width: 200px;height: 400px;background-color: #393939;opacity: 0.4;line-height: 400px;color: #fff;text-align: center;font-size: 12px;}
.no3{width: 200px;height: 400px;background-color: #393939;opacity: 0.4;line-height: 400px;color: #fff;text-align: center;font-size: 12px}
.no4{width: 200px;height: 400px;background-color: #393939;opacity: 0.4;line-height: 400px;color: #fff;text-align: center;font-size: 12px}
.no5{width: 200px;height: 400px;background-color: #393939;opacity: 1;line-height: 400px;color: #fff;text-align: center;font-size: 12px}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#box1").click(function(){
$(".no1").animate({
"width":"toggle",
},1000);})
$("#box2").dblclick(function(){
//alert("aa");
$(".no2").animate({
"width":"0px",
"height":"0px",
"margin":"200px 100px",
'fontSize':'1px'
},1000);})
$("#box2").mouseleave(function(){
//alert("aa");
$(".no2").animate({
"width":"200px",
"height":"400px",
"margin":"0px 0px",
"fontSize":"30px"
},1000);})
var m = 1;
$("#box3").click(function(){
if(m){
$(".no3").hide();
m=0;
}else{
$(".no3").show();
m=1
}
})
$("#box4").click(function(){
$(".no4").slideToggle(1000);
})
$("#box5").click(function(){
$(".no5").fadeToggle(2000);
})
})
</script>
</head>
<body>
<div id ="box">
<div id="box1">
<div>单击左划、再点击返回</div>
</div>
<div id="box2">
<div>双击收小</div>
</div>
<div id="box3">
<div>单击隐藏、再单击返回</div>
</div>
<div id="box4">
<div>单击上下滑动</div>
</div>
<div id="box5">
<div>单击淡进淡出
</div></div>
</div>
</body>
</html>
