篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为了加深印象和了解，我看着文档把jQuery效果敲了一遍简单的总结一了遍。相关的知识，希望对你有一定的参考价值。
<!--
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>