目录
jQuery 隐藏/显示
jQuery 淡入淡出
jQuery 滑动
jQuery 动画
jQuery Callback
jQuery 隐藏/显示
通过jQuery，我们可以使用hide(),show()和toggle()来隐藏和显示指定的HTML元素。
语法
隐藏指定元素：$(selector).hide(speed,callback);
显示指定元素：$(selector).show(speed,callback);
显示被隐藏的元素同时隐藏显示的元素：$(selector).toggle(speed,callback);
可选参数
speed：规定了隐藏/显示的速度，可以取slow、fast、和毫秒。
callback：隐藏/显示操作执行完后所执行的函数。
示例
$("#hide").click(function(){
$("p").hide("fast");
});
$("#show").click(function(){
$("p").show("slow");
});
$("button").click(function(){
$("p").toggle(1000);
});
动手试一试：在线测试
jQuery 淡入淡出
通过jQuery fade方法可以实现元素的淡入淡出效果。
jQuery有以下四种fade方法:
淡入已隐藏的元素：$(selector).fadeIn(speed,callback);
淡出已显示的元素：$(selector).fadeOut(speed,callback);
如果元素已淡出则添加淡入效果，如果元素已淡入则添加淡出效果：
$(selector).fadeToggle(speed,callback);
为元素淡入淡出设定不透明度：$(selector).fadeTo(speed,opacity,callback);
参数说明：
opacity:为淡入淡出效果设定不透明度，值介于0和1之间。
示例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("fast",0.6);
$("#div3").fadeTo(2000,0.35);
});
动手试一试：在线测试
jQuery 滑动
jQuery滑动方法可以使元素上下滑动。
语法
向下滑动元素：$(selector).slideDown(speed,callback);
向上滑动元素：$(selector).slideUp(speed,callback);
在上滑和下滑之间切换：$(selector).slideToggle(speed,callback);
示例
$("#flip").click(function(){
$("#panel").slideToggle();
});
动手试一试：在线测试
jQuery 动画
我们可以通过animate()方法来创建自定义动画，
完成平移、缩放、淡入淡出等。
语法
$(selector).animate({params},speed,callback);
参数说明
params:参数定义要添加动画的CSS属性，比如height、width。
ps:animate()方法几乎可以操作所有CSS属性，不过，需要记住：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，
示例
目标向右完成平移、缩放、淡出：
$("button").click(function(){
$("div").animate({
left:'250px', //也可以使用相对值，比如left:'+=250px'
opacity:'0.5',
height:'150px', //或者使用预定义的值'show'、'hide'、'toggle'，如：height:'toggle'
width:'150px'
});
});
动手试一试：在线测试
jQuery也提供队列功能，我们可以编写多个animate()调用，jQuery会依次执行这些调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.naimate({height:'300px',opacity:'0.8'},"slow");
div.naimate({height:'100px',opacity:'0.4'},"slow");
div.naimate({height:'100px',opacity:'0.8'},"slow");
})
动手试一试：在线测试
2015-5-12 施工ing