jquery中动态效果小结

动画效果，如果综合使用，还能使用简单的代码简单实现jquery的各种插件的效果

本文参考《《浅谈jquery》一书，加以整理，并结合自己的实际经验而成，可以看做一个 学习手册吧
编辑的时候代码全乱了，重新整理了下，可能代码格式还是有点乱，请见谅
显示（show），隐藏(hide)与组合（toggle）效果
1.show(speed,callback);
说明：这个方法可以显示隐藏的元素，其中参数也缺省，即写成show()这种形式
speed ---指定显示的速度 有3个参数可以选择 slow ,normal,fast,也可以自己指定数字（单位：毫秒）
callback---回调函数
下面是一个简单的例子
代码如下:
var callback=function(){ //alert("我是回调函数");
}
var f1=function(){
// $("#t1").show(); 参数缺省
// $("#t1").show("fast",callback); 显示速度为fast方式
$("#t1").show(3000,callback);//自定义显示速度 3000毫秒
};
$("#b1").click(f1);

Html代码
代码如下:
<input type="button" value="show" id="b1"/> <div id="t1" style="display: none;border: 1px solid gray;">dd</div>

2 hidden(speed,callback);
说明：相反与show方法，用于隐藏元素，参数与show相同，请参考3.1
下面的例子是点击一个按钮，隐藏显示的div
代码如下:
var callback=function(){ //alert("我是回调函数");
}
var f1=function(){
// $("#t1").hide(); 参数缺省
// $("#t1").hide("fast",callback); 显示速度为fast方式
$("#t1").hide(3000,callback);//自定义显示速度 3000毫秒
}; $("#b1").click(f1);

Html代码
代码如下:
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

3 toggle(speed,callback)
说明：这个可以理解为show()与hide()方法的结合体，轮换执行show()与hide()
比如：页面有一个隐藏的元素，第一次执行toggle()，显示元素，第二次执行，隐藏元素，第三次则又显示元素。。。
参数与3.1,相同
代码如下:
var callback=function(){ //alert("我是回调函数");
}
var f1=function(){
//$("#t1").toggle(); // 参数缺省
//$("#t1").toggle("fast",callback); //显示速度为fast方式
$("#t1").toggle(3000,callback);
};
$("#b1").click(f1);


Html代码
代码如下:
<input type="button" value="show" id="b1"/> <div id="t1" style="border: 1px solid gray;">dd</div>

二.元素的滑动效果（向下展开，向上收缩）
1.slideDown(speed,[callback]);
说明：改变对象的height以实现向下展开的动画效果，常用与显示隐藏的元素
代码如下:
var callback=function(){ //alert("我是回调函数"); }
var f1=function(){
//$("#t1").slideDown(); // 参数缺省
//$("#t1").slideDown("fast",callback); //显示速度为fast方式
$("#t1").slideDown(1000,callback);