jQuery简单效果整理

隐藏/显示 
隐藏：$(selector).hide(speed,callback); 
显示：$(selector).show(speed,callback); 
可以使用toggle()方法来切换隐藏和显示。 
语法：$(selector).toggle(speed,callback) 
可选的speed参数规定隐藏/显示的速度，可以取：“slow”、“fast”或毫秒值。 
可选的callback参数是隐藏/显示完成后所执行的函数名称。

淡入/淡出 
fadeIn()方法，用于淡入已隐藏的元素 
语法：$(selector).fadeIn(speed,callback); 
fadeOut()方法，用于淡出可见元素 
语法：$(selector).fadeOut(speed,callback); 
fadeToggle()方法，切换淡入或淡出效果 
语法：$(selector).fadeToggle(speed,callback); 
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。 
可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeTo()方法，渐变为给定的不透明度（值介于0与1之间）。 
语法：$(selector).fadeTo(speed,opacity,callback); 
必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。 
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 
可选的 callback 参数是该函数完成后所执行的函数名称。

滑动 
slideDown()方法，用于向下滑动元素 
语法：$(selector).slideDown(speed,callback); 
slideUp()方法，用于向上滑动元素 
语法：$(selector).slidUp(speed,callback); 
slideToggle()方法 
语法：$(selector).slideToggle(speed,callback); 
可选的speed参数规定效果的时长，可取：“slow”、“fast”或毫秒值。 
可选的callback参数是滑动完场后所执行的函数名称。

动画 
animate()方法用于创建自定义动画 
语法：$(selector).animate({params},speed,callback); 
必须的params参数定义形成动画的CSS属性。 
可选的speed参数规定效果的时长。可取：“slow”、“fast”或毫秒值。 
可选的callback参数是动画完成后执行的函数名称。 
提示：默认所有HTML元素都有一个静态位置，且无法移动。如需对位置进行操作，要把元素的CSS position属性设置为relative、fixed或absolute。

如果希望在彼此之后执行不同的动画，可以利用队列功能：

$("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
})//逐一运行这些animate调用。

• 1
• 2
• 3
• 4
• 5
• 6
• 7

停止动画 
stop()方法用于停止动画或效果，在他们完成之前。 
stop()方法适用于所有jQuery效果函数，包括好动、淡入淡出和自定义动画。 
语法：$(selector).stop(stopAll,goToEnd); 
可选的stopAll参数规定跟是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 
可选的goToEnd参数规定是否立即完成当前动画。默认是false。

callback函数 
由于JavaScript语句（指令）是逐一执行的-按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没完成。为了避免这种情况，可以以参数的形式添加callback函数。

Chaining 
jQuery链接（chaining）技术，允许我们在相同的元素上运行多条jQuery命令，一条接着另一条。 
这样，浏览器就不必多次查找相同的元素，只需要简单地吧该动作最佳到之前的动作上。 
例如：

$("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
    //可以折行和缩进
})