<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jquery 效果 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
div.panle
{
margin:10px;
background:#e5eecc;
padding:5px;
height:120px;
border:solid 1px #c3c3c3;
}
</style>
<script>
$(function(){
$("#a").bind("click",function(){
// $("p").fadeOut();
//增加fadeOut消失速度,callback是动画效果执行完毕后进行的回调函数应用
$("p").fadeOut(1000,callback);
//$("p").fadeOut(1000);
});
$("#b").bind("click",function(){
//$("p").fadeIn();
//同理显示出也一样
$("p").fadeIn(1000,function(){
alert("动画执行完毕后!");
});
});
function callback()
{
alert("开始测试1")
}
//2 切换P隐藏
$("#c").bind("click",function(){
$("p").toggle();
});
//3 滑动DIV
$("#d").bind("click",function(){
$(".panle").slideToggle(1000);
});
});
</script>
<body>
<div border="1px">1.FadeIn与FadeOut用法 $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback)
<br/>
<br/>
<p>哈哈啊啊</p>
<button id="a">FadeOut</button>
<button id="b">FadeIn</button>
</div>
<div border="1px">2.Toggle切换-------------$(selector).toggle(speed,callback)
<br/>
<br/>
<p>切换内容信息</p>
<p>把所有含P元素的标签进行切换隐藏</p>
<button id="c">切换Toggle</button>
</div>
<div border="1px" class="panle">3.上下滑动-----------------$(selector).slideToggle()
<br/>
<br/>
<p>Jquery效果滑动内容信息,</p>
</div>
<button id="d">滑动</button>
</body>
</html>
