##Jquery动画效果
Jquery动画效果
##一、Jquery 隐藏hide()-显示show()
例子：
<body>
<input type="button"value="隐藏"id="hide">
<input type="button"value="显示"id="show">
<input type="button"value="显示/隐藏切换"id="toggle">
<div id="b1"style="width:80px;height:80px;background-color:red;">1</div>
<div id="b2"style="width:80px;height:80px;background-color:pink;">2</div>
<div id="b3"style="width:80px;height:80px;background-color:yellow;">3</div>
</body>
##1，显示与隐藏
语法：$(selector).hide(speed,callback)；
$(selector).show(speed,callback)；
解释：speed参数规定隐藏/显示的速度，可以取以下的值：slow、fast或者毫秒。
callback参数是隐藏或显示完成所执行的函数名称。
测试：下面我们来试下看id为showDiv是否隐藏
$("#showDiv").hide("slow","swing",function(){
alert("隐藏了");
});
##2，切换隐藏于显示
语法：$(selector).toggle(speed,callback);
##3，注意：对于可选的 callback 参数，有以下两点说明：
1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；
2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；
3.callback既可以是函数名，也可以是匿名函数；
<script type="text/javascript">
$(function () {
//隐藏
$("#hide").click(function () {
$("#b1").hide();//直接消失
$("#b2").hide("slow");//默认效果(快速)
$("#b3").hide(5000);//缓慢消失
});
//显示
$("#show").click(function () {
$("#b1").show();
$("#b2").show("slow");
$("#b3").show(5000);
});
//显示/隐藏切换
$("#toggle").click(function () {
$("#b1").toggle();
$("#b2").toggle("slow");
$("#b3").toggle(5000);
});
});
</script>
##二、淡入、淡出效果
##1，淡入fadeIn();
##2,淡出fadeOut();
##3,切换淡入淡出fadeToggle();
##4,变淡fadeTo();
//fadeIn显示
$("#hide").click(function () {
$("#b1").fadeIn();//出现
$("#b2").fadeIn("slow");//默认效果(快速)
$("#b3").fadeIn(5000);
});
//fadeOut隐藏
$("#show").click(function () {
$("#b1").fadeOut();//直接消失
$("#b2").fadeOut("slow");
$("#b3").fadeOut(5000);//缓慢消失
});
//fadeToggle切换
$("#toggle").click(function () {
$("#b1").fadeToggle();
$("#b2").fadeToggle("slow");
$("#b3").fadeToggle(5000);
});
//fadeTo颜色变淡
$("#topro").click(function () {
$("#b1").fadeTo("slow",0.4);
$("#b2").fadeTo("slow",0.9);
$("#b3").fadeTo(5000,0.1);
});
##三、滑动效果
##1，滑动显示
##2，滑动隐藏
##3，滑动隐藏显示切换
$(function () {
//滑动显示
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
//滑动隐藏
$("#panel").click(function () {
$("#panel").slideUp("slow");
});
// 滑动隐藏显示切换
$("#flip").click(function () {
$("#panel").slideToggle("slow");
});
})
##四、动画 animate() 方法
语法：$(selector).animate({params},speed,callback);
注意：必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
<input type="button"value="开始动画"id="cation">
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"id="box"></div>>
$("#cation").click(function () {
$("#box").animate({
left:\'300px\',
width:\'200px\',
height:\'200px\',
opacity:\'0.3\',
});
});
$("#box").animate({
fontSize:\'30px\'
});
注意：
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。
##五、停止动画 Stop()
$("#stop1").stop();