jQuery
效果
1)基本
2)滑过
3)淡入淡出
4)自定义
5)设置基本
show（显示隐藏的匹配元素。）
css代码
<p style="display: none">hello,hehe</p>
jquery代码
$("p").show(); 动画效果
1)$("p").show("slow");2)$("p").show("normal");3)$("p").show("fast");4)$("p").show(1000,"swing",function(){console.log("动画执行完成")
});hide（隐藏显示的元素。）
css代码
<p>hello,hehe</p>
jquery代码
$("p").hide(); 动画效果
1)$("p").hide(1000);2)$("p").hide("slow");3)$("p").show("normal");4)$("p").show("fast");toggle（用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。）
css代码
<p>hello,hehe</p>
<input type="button" value="切换" id="btn1">
jquery代码
$("#btn1").click(function(){$("p").toggle("normal");
})另一种（2个或者多个）function a(){alert("hehe1")
}
function b(){alert("hehe2")
}
$("p").toggle(a,b); 滑过
slideDown（通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。）
css代码
<p style="width:300px;height: 500px;background:red;display: none">hello,hehe</p>
<input type="button" value="切换" id="btn1">
jquery代码
$("#btn1").click(function(){$("p").slideDown()
});slideUp（通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。）
css代码
<p style="width:300px;height: 500px;background:red;display: none">hello,hehe</p>
<input type="button" value="切换2" id="btn2">
jquery代码
$("#btn2").click(function(){$("p").slideUp()
});slideToggle（通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
）
css代码
<p style="width:300px;height: 500px;background:red;display: none">hello,hehe</p>
<input type="button" value="切换3" id="btn3">
jquery代码
$("#btn3").click(function(){$("p").slideToggle()
});淡入淡出
fadeIn（通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。）
html代码div{width: 200px;height: 200px;background: red;display: none;}
css代码<input type="button" value="淡入"><div></div>
jquery代码
$("input").first().click(function(){$("div").fadeIn(5000);
})fadeOut（通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。）
html代码div{width: 200px;height: 200px;background: red;display: none;}
css代码<input type="button" value="淡出"><div></div>
jquery代码
$("input").eq(1).click(function(){$("div").fadeOut(5000);
})fadeOut（通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。）
html代码div{width: 200px;height: 200px;background: red;display: none;}
css代码<input type="button" value="淡出"><div></div>
jquery代码
$("input").eq(1).click(function(){$("div").fadeTo(1000,0.5);
})自定义
animate（用于创建自定义动画的函数。）
html代码span{background: red;opacity:0;position: absolute;}
css代码<span>123</span>
jquery代码
$("span").animate({"width":"300px","opacity":"1","font-size":"3em","height":"100px","left":"300px","top":"100px"
},3000,function(){console.log("动画完成")
})
