jQuery动画特效

1.1基本动画

hide():隐藏HTML元素

show():显示HTML元素

toggle():show()和Hide()的切换。

语法

$(selector).show(speed,easing,callback)

speed 可选。规定显示效果的速度。

可能的值：毫秒 "slow" "fast"

easing 可选。规定在动画的不同点上元素的速度。

默认值为 "swing"。

可能的值：

"swing" - 在开头/结尾移动慢，在中间移动快

"linear" - 匀速移动

callback 可选。show() 方法执行完之后，要执行的函数。

1.2 滑动动画效果

jQuery 拥有以下滑动方法：

• slideDown()：向下滑动
• slideUp()：向上滑动
• slideToggle()：向上和向下滑动切换

  1.3 淡入淡出效果

  通过 jQuery，您可以实现元素的淡入淡出效果。

  jQuery 拥有下面四种 fade 方法：

• fadeIn()：淡入已隐藏的元素-显示。
• fadeOut()：淡出显示的元素-隐藏。
• fadeToggle()：淡入淡出切换。
• fadeTo()：渐变为给定的不透明值。

fadeIn(speed,easing,function)

fadeOut(speed,easing,function)

fadeToggle(speed,easing,function)

参数解析:

(1)speed:速度，值可以是数字，单位毫秒，比如100,2000，也可以是slow,fast英文。

(2)easing:运动的动画类型，默认值：swing:开头结尾比较慢，中间快。linear:匀速运动。

(3)function:可以使用函数。

fadeTo(speed,opcity,easing,function)

opacity:淡入淡出透明度，值在：0.00-1.00之间的数字。

其他参数同上。

1.4 停止动画效果

stop():停止动画。

1.5 自定义动画效果

animate(style,speed,easing,function)

参数解析:

1. style:样式（必须）,规定产生动画效果的一个或多个 CSS 属性/值。

注意：当与 animate() 方法一起使用时，该属性名称必须是驼峰写法： 您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。

(2)speed:速度，值可以是数字，单位毫秒，比如100,2000，也可以是slow,fast英文。

(3)easing:运动的动画类型，

默认值：swing:开头结尾比较慢，中间快。

linear:匀速运动。

(4)function:可以使用函数。

1.6 链式动画效果

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令。