<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq中的动画</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
margin-right: 20px;
margin-bottom: 30px;
float: left;
}
#a{
background-color: palegreen;
}
#b{
background-color: palevioletred;
}
#c{
background-color: gold;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<hr style="clear: both;" />
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="teshu1">特殊效果1</button>
<button id="fadeIn">淡入</button>
<button id="fadeOut">淡出</button>
<button id="teshu2">特殊效果2</button>
<button id="teshu3">特殊效果3</button>
<button id="slideUp">上拉</button>
<button id="slideDowm">下拉</button>
<button id="teshu4">特殊效果4</button>
</body>
</html>
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#hide").click(function(){
$("#a").hide(800);
$("#b").hide("slow");
$("#c").hide(1000, function(){
console.log("动画结束才会执行此函数!!!");
})
})
$("#show").click(function(){
$("#a").show(300);
$("#b").show("normal");
$("#c").show(2000, function(){
console.log("动画执行完毕!展示show");
})
})
$("#teshu1").click(function(){
$("#a").toggle(1000);
$("#b").toggle("fast");
$("#c").toggle(1000, function(){
console.log("特殊效果1!!动画完毕!");
})
})
$("#fadeOut").click(function(){
$("#a").fadeOut(500);
$("#b").fadeOut("slow");
$("#c").fadeOut(1000, function(){
console.log("淡出效果动画结束!");
})
})
$("#fadeIn").on("click", function(){
$("#a").fadeIn(600);
$("#b").fadeIn("fast");
$("#c").fadeIn(2000, function(){
console.log("淡入效果动画结束!!");
})
})
$("#teshu2").click(function(){
$("#a").fadeTo(1200, 0.3);
$("#b").fadeTo("slow", 0.5);
$("#c").fadeTo( 1000, 0.2, function(){
console.log("透明度变化结束!!");
})
})
$("#teshu3").click(function(){
$("#a").fadeToggle(1000);
$("#b").fadeToggle("slow");
$("#c").fadeToggle("fast", function(){
console.log("特殊效果3执行结束!");
})
})
$("#slideUp").click(function(){
$("#a").slideUp(1000);
$("#b").slideUp("slow");
$("#c").slideUp(800, function(){
console.log("上拉动画结束!");
})
})
$("#slideDowm").click(function(){
$("#a").slideDown(1000);
$("#b").slideDown("slow");
$("#c").slideDown(800, function(){
console.log("下拉动画结束!");
})
})
$("#teshu4").click(function(){
$("#a").slideToggle(1000);
$("#b").slideToggle("slow");
$("#c").slideToggle(800, function(){
console.log("上拉/下拉动画结束!");
})
})
</script>
