<!--
1.隐藏与显示
hide（参数）隐藏，show(参数)显示toggle（）切换hide和show
2.淡入与淡出
fadein（参数）淡入fadeout（参数）淡出fadetoggle（）切换fadein和fadeout，fadeto（时间参数，透明度）用于更改时间参数
3.滑动
slideDown（参数）向下滑动，slideUp（参数）向上滑动参数 slideToggle（参数）slideDown、slideUp之间切换-->
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>JavaScript与jQuery效果</title>
???<link rel="stylesheet" type="text/css" href="css/index.css">
???<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="jQuery">
???<!-- 用户jQuery效果实列-->
???jquery
???<div class="hide">
???????<p class="frist">hello word</p>
???????<button class="bhide">隐藏</button>
???????<button class="bshow">显示</button>
???????<button class="btoggle">隐藏/显示</button>
???</div>
???<div class="danru">
???????<button class="fadein">淡出</button>
???????<button class="fadeout">淡入</button>
???????<button class="fadetoggle">淡入/淡出</button>
???????<button class="fadeto">更改透明度</button>
???????<div class="a"></div>
???????<div class="b"></div>
???????<div class="c"></div>
???</div>
???<div class="slide">
???????<button class="slideDown">向下拉</button>
???????<button class="slideUp">向上拉</button>
???????<button class="slidetoggle">向上/向下拉</button>
???????<div class="slidecontent">
???????????<p>你好世界！</p>
???????</div>
???</div>
???<!--脚本开始-->
???<script type="text/javascript">
???????//hidi(s)s控制参数
???????/* 显示隐藏开始
????????* hide（参数）隐藏，show(参数)显示toggle（）切换hide和show
????????* */
???????$(‘.bhide‘).click(function () {
???????????$(‘.frist‘).hide(1000);
???????});
???????$(‘.bshow‘).click(function () {
???????????$(‘.frist‘).show();
???????});
???????$(‘.btoggle‘).click(function () {
???????????$(‘.frist‘).toggle(2000);
???????});
???????/*显示隐藏结束*/
???????/*淡入淡出开始
????????* fadein（参数）淡入fadeout（参数）淡出fadetoggle（）切换fadein和fadeout，fadeto（时间参数，透明度）用于更改时间参数
????????* */
???????$(‘.fadein‘).click(function () {
???????????$(‘.a‘).fadeIn();
???????????$(‘.b‘).fadeIn(‘show‘);
???????????$(‘.c‘).fadeIn(2000);
???????});
???????$(‘.fadeout‘).click(function () {
???????????$(‘.a‘).fadeOut();
???????????$(‘.b‘).fadeOut(‘slow‘);
???????????$(‘.c‘).fadeOut(2000);
???????});
???????$(‘.fadetoggle‘).click(function () {
???????????$(‘.a‘).fadeToggle();
???????????$(‘.b‘).fadeToggle(‘slow‘);
???????????$(‘.c‘).fadeToggle(2000);
???????});
???????$(‘.fadeto‘).click(function () {
???????????$(‘.a‘).fadeTo(2000, 0.15);
???????????$(‘.b‘).fadeTo(2000, 0.55);
???????????$(‘.c‘).fadeTo(2000, 0.85);
???????});
???????/*淡入淡出结束*/
???????/*滑动开始
????????* slideDown（参数）向下滑动，slideUp（参数）向上滑动参数
????????* slideToggle（参数）slideDown、slideUp之间切换
????????* */
???????$(‘.slideDown‘).click(function () {
???????????$(‘.slidecontent‘).slideDown(1000);
???????});
???????$(‘.slideUp‘).click(function () {
???????????$(‘.slidecontent‘).slideUp(1000);
???????});
???????$(‘.slidetoggle‘).click(function () {
???????????$(‘.slidecontent‘).slideToggle(2000);
???????});
???????/*滑动结束*/
???</script>
???<!--脚本结束-->
</div>
</body>
</html>
为了加深印象和了解，我看着文档把jQuery效果敲了一遍简单的总结一了遍。
原文地址：https://www.cnblogs.com/Greenpark/p/8361802.html