<!--转载于 听说你的代码很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>jquery 学习(七) - 常用动态效果
原文地址：https://www.cnblogs.com/Anec/p/9871331.html