jQuery的简单特效，主要是显示与隐藏、淡入淡出、透明度、滑动以及回调。
先贴总的代码
<!DOCTYPE html>
<html>
<head>
<title>jQuery特效</title>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<style type="text/css">
div{
width: 40px;
height: 40px;
float: left;
background-color: blue;
margin-right: 10px;
}
#content{
padding: 50px;
display: none;
}
#flipshow,#content,#fliphide,#fliptoggle{
padding: 5px;
text-align: center;
background-color: aquamarine;
border: 1px solid green;
}
</style>
</head>
<body>
<!-- 淡入淡出 -->
<div id="div1" style="width: 40px;height: 40px;display: none;background-color: aquamarine;"></div>
<div id="div2" style="width: 40px;height: 40px;display: none;background-color: palegreen;"></div>
<div id="div3" style="width: 40px;height: 40px;display: none;background-color: palevioletred;"></div>
<button id="in">fade in</button>
<button id="out">fade out</button>
<button id="toggle">fade toggle</button>
<button id="to">fade to</button>
<!-- 滑动 -->
<div id="flipshow">显示</div>
<div id="fliphide">隐藏</div>
<div id="fliptoggle">显示/隐藏</div>
<div id="content">Hello jQuery</div>
<!--回调-->
<p>Hello World</p>
<button id="btn">隐藏</button>
<script type="text/javascript">
//jQuery特效之显示与隐藏
$(function(){
for (var i = 0; i < 5; i++) {
$("<div>").appendTo(document.body);
};
$("div").click(function(){
$(this).hide(1000);
});
//jQuery特效之淡入淡出与透明度
$("#in").on("click",function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(2000);
$("#div3").fadeIn(1500);
});
$("#out").click(function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click",function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
//透明度设置 0是完全透明，1是完全不透明
$("#to").click(function(){
$("#div1").fadeTo(1000,0.5);
$("#div2").fadeTo(1000,1);
$("#div3").fadeTo(1000,0);
});
//jQuery特效之滑动
$("#flipshow").click(function(){
$("#content").slideDown(1000);
});
$("#fliphide").click(function(){
$("#content").slideUp(1000);
});
$("#fliptoggle").click(function(){
$("#content").slideToggle(1000);
});
//jQuery特效之回调
$("#btn").click(function(){
$("p").hide(1000,function(){
alert("回调完成");
});
});
});
//综合
$("p").css("color","red").slideUp(1000).slideDown(1000).slideUp(2000);
</script>
</body>
</html>显示与隐藏
显示和隐藏主要是利用了hide、show、以及toggle方法淡入淡出与透明度
淡入淡出是利用fadeIn、fadeOut、以及fadeToggle方法
透明度则是利用了fadeTo方法，fadeTo方法的第二个参数表示透明度。
其中0表示完全透明，1表示完全不透明滑动
滑动利用的是slideDown、slideUp、以及slideToggle方法回调
回调是在动画特效执行之后再去执行某个操作的过程