jQuery 效果函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery/jquery.js"></script>
<script>
$(function(){
//hide(),show()
//点击显示隐藏
$("#b1").toggle(function(){
$("#p1").hide();
},function () {
$("#p1").show(2000); //给定时间 控制显示或隐藏速度
})
//jQuery Fading 方法 淡入淡出效果
$("#b2").toggle(function(){
$("#p2").fadeOut(1000); //淡出 参数可以是毫秒,slow,fast 或者不填
},function(){
$("#p2").fadeIn("slow");
},function(){
$("#p2").fadeToggle(); //如果已经淡入则淡出
},function(){
$("#p2").fadeToggle(); //如果已经淡出则淡入
},function(){
$("#p2").fadeTo("fast",0.5);//淡化到指定透明度
})
//slide 滑入
$("#b3").toggle(function(){
$("#p3").slideDown(1000); //滑入
},function(){
$("#p3").slideUp(); //滑出
},function(){
$("#p3").slideToggle(); //滑入滑出
},function(){
$("#p3").slideToggle();
})
//animate() 动画
$("#b4").click(function(){
$("#p4").animate(
{
left:"500px"
},1000
);
});
})
</script>
</head>
<body>
<div>
<p id="p1">显示隐藏</p>
<p id="p2">淡入淡出</p>
<p id="p3">滑入</p>
<div id="p4" style="background-color: red;width:100px;height: 100px;position:relative;">动画</div>
</div>
<hr/>
<div>
<button id="b1">点击显示隐藏</button><br/>
<button id="b2">淡入淡出</button><br/>
<button id="b3">滑入</button><br/>
<button id="b4">动画</button>
</div>
</body>
</html>