<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
background-color: #EEEEEE;
border: 1px solid #666666;
width: 400px;
height: 200px;
}
#divFunc{
width: 250px;
}
.btn{
border: 1px solid #666666;
padding: 2px;
width: 120px;
height: 30px;
margin-right: 5px;
margin-top: 15px;
float: left;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
//使用animate方法代替其他动画方法
$(document).ready(function () {
$("input:eq(0)").click(function () {
$("#div1").hide(600);
});
$("input:eq(1)").click(function () {
$("#div1").animate({height:"hide",width:"hide",opacity:"hide"},600);
});
$("input:eq(2)").click(function () {
$("#div1").fadeOut(600);
});
$("input:eq(3)").click(function () {
$("#div1").animate({opacity: "hide"},600);
});
$("input:eq(4)").click(function () {
$("#div1").slideUp(600);
});
$("input:eq(5)").click(function () {
$("#div1").animate({height: "hide"},600);
});
$("input:eq(6)").click(function () {
$("#div1").fadeTo(600,"0.2");
});
$("input:eq(7)").click(function () {
$("#div1").animate({opacity:"0.2"},600)
});
$("#btnShow").click(function () {
$("#div1").fadeTo(600,"1.0").show("normal");
});
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="divFunc">
<input type="button" id="btn1" value="hide" class="btn">
<input type="button" id="btn2" value="animate hide" class="btn">
<input type="button" id="btn3" value="fadeOut" class="btn">
<input type="button" id="btn4" value="animate fadeOut" class="btn">
<input type="button" id="btn5" value="slideUp" class="btn">
<input type="button" id="btn6" value="animate slideUP" class="btn">
<input type="button" id="btn7" value="fadeTo" class="btn">
<input type="button" id="btn8" value="animate fadeTo" class="btn">
<input type="button" id="btnShow" value="show" class="btn">
</div>
</body>
</html>