jQuery学习之二：jQuery效果

1、jQuery 效果之隐藏和显示

语法：

$(selector).hide(speed,callback);  //隐藏元素

$(selector).show(speed,callback); //显示元素

$(selector).toggle(speed,callback); //隐藏、显示切换

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

利用隐藏和显示功能可以实现TAB的折叠、导航栏的收起与显示等效果。

2、jQuery 效果之淡入淡出

$(selector).fadeIn(speed,callback);  //淡入已隐藏的元素

$(selector).fadeOut(speed,callback); //淡出可见元素

$(selector).fadeToggle(speed,callback); //切换淡入、淡出可见元素

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

$(selector).fadeTo(speed,opacity,callback);  //允许渐变为给定的不透明度（值介于 0 与 1 之间）

3、jQuery 效果之滑动

$(selector).slideDown(speed,callback); 

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

貌似效果和hide()、show()差不多，差别在于元素的显示与隐藏的方式不同

4、jQuery 效果 - 动画

$(selector).animate({params},speed,callback); //创建自定义动画

必需的 params 参数定义形成动画的 CSS 属性，使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等，。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

注：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

jQuery 提供针对动画的队列功能，编写的多个 animate()会顺序逐一运行。如：

$("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");
});

5、jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(bStopAll,bGoToEnd);

可选的参数bStopAll规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 bGoToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

6、jQuery Callback 函数

Callback 函数在当前动画 100% 完成之后执行。