<!--转载于 听说你的代码很6-->
<!--http://www.jq22.com/webqd2377-->
CSS
<style>
#content #first {
color:white;
background-color:green;
width:240px;
height:100px;
margin:10px 0 0 0;
padding:10px;
}
</style>
html
<div id="content">
<input id="testhide" type="button" value="隐藏">
<input id="testshow" type="button" value="显示">
<input id="testtoggle" type="button" value="隐藏/显示">
<input id="testslideup" type="button" value="上滑隐藏">
<input id="testslidedown" type="button" value="下滑显示">
<input id="testslidetoggle" type="button" value="上/下滑显示">
<input id="testfadein" type="button" value="淡入显示">
<input id="testfadeout" type="button" value="淡出显示">
<input id="testfadetoggle" type="button" value="淡入/出显示">
<input id="testanimate" type="button" value="自定义显示">
<div id="first">
想要做一件事，永远都不要怕晚。只要你开始做了，就不晚。而若是你不开始，仅仅停留在思考、犹豫甚至焦虑的状态，那就永远都是零。
</div>
jquery
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$("#testhide").click(function() {
// 动画效果
$("#first").hide("slow");
});
$("#testshow").click(function() {
// 动画效果
$("#first").show("slow");
});
$("#testtoggle").click(function() {
// 动画效果
$("#first").toggle("slow");
});
$("#testslideup").click(function() {
// 动画效果
$("#first").slideUp("slow");
});
$("#testslidedown").click(function() {
// 动画效果
$("#first").slideDown("slow");
});
$("#testslidetoggle").click(function() {
// 动画效果
$("#first").slideToggle("slow");
});
$("#testfadein").click(function() {
// 动画效果
$("#first").fadeIn("slow");
});
$("#testfadeout").click(function() {
// 动画效果
$("#first").fadeOut("slow");
});
$("#testfadetoggle").click(function() {
// 动画效果
$("#first").fadeToggle("slow");
});
$("#testanimate").click(function() {
// 动画效果
$("#first").animate({
fontSize: "12px"
}, "slow");
});
});
</script>