Web前端学习之jQuery学习（三）jQuery 的常用 API 之 jQuery 效果

jQuery 常见效果

**jQuery **给我们封装了很多动画效果，最为常见的有：

// 显示隐藏
show()
hide()
toggle()
// 滑动
slideDown()
slideUp()
slideToggle()
// 淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
// 自定义动画
animate()

显示隐藏效果

显示语法规范

show([speed,[easing],[fn]])

显示参数

1. 参数可以省略，无动画直接显示。
2. speed：三种预定速度之一的字符串(“slow”,”nomal”,or “fast”)或表示动画时长的毫秒数值（如：100）。
3. easing：(Optional)用来指定切换效果，默认是”swing”,可用参数”linear”。
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

隐藏语法规范

hide([speed,[easing],[fn]])

隐藏参数

1. 参数可以省略，无动画直接显示。
2. speed：三种预定速度之一的字符串(“slow”,”nomal”,or “fast”)或表示动画时长的毫秒数值（如：100）。
3. easing：(Optional)用来指定切换效果，默认是”swing”,可用参数”linear”。
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

切换语法规范

toggle([speed,[easing],[fn]])

切换参数

1. 参数可以省略，无动画直接显示。
2. speed：三种预定速度之一的字符串(“slow”,”nomal”,or “fast”)或表示动画时长的毫秒数值（如：100）。
3. easing：(Optional)用来指定切换效果，默认是”swing”,可用参数”linear”。
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

滑动效果

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

语法以及参数与显示隐藏效果一致。

事件切换

hover(over. , out.)

1. over.鼠标移到元素上要触发的函数(相当于 mouseenter )
2. out.鼠标移出元素要触发的函数(相当于 mouseleave )

动画队列及其停止排队方法

动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止排队

stop()

1. stop()方法用于停止动画或效果
2. 注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

淡入淡出效果

淡入：fadeIn()
淡出：fadeOut()
淡入淡出切换：fadeToggle()

语法以及参数也与显示隐藏效果一致。

渐进方式调整到指定的不透明度

fadeTo([speed],opacity,[easing],[fn]])

效果参数

opacity透明度必须写，取值 0~1 之间。

其余参数与显示隐藏效果一致。

自定义动画 animate

语法

animate(params,[speed],[easing],[fn])

参数

params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数可以省略，与显示隐藏效果一致。

示例

$("button").click(function() {
	$("div").animate({
		left: 500,
		top: 300,
		opacity: .4,
		...
	}, 500)
})