jQuery效果

jQuery效果

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

显示隐藏效果

显示语法规范

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

显示参数

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

隐藏语法规范

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

隐藏参数

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

切换语法规范

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

切换参数

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

滑动效果

下滑效果语法规范

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

下滑效果参数

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

上滑效果语法规范

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

上滑效果参数

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

滑动切换效果语法规范

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

滑动切换效果参数

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

事件切换

hover([over,]out) 

1. over:鼠标移到元素上要触发的函数（相当于mouseenter）
2. out:鼠标移出元素要触发的函数（相当于mouseleave）
3. 如果只写一个函数，则鼠标经过和离开都会触发它

hover(function(){
    slideDown()
},
function(){
    slideUp()
});
 
//简化代码
hover(function(){
    slideToggle()
});

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

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

停止排队

stop() 

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

淡入淡出效果

淡入效果语法规范

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

淡入效果参数

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

淡出效果语法规范

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

淡出效果参数

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

淡入淡出切换效果语法规范

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

淡入淡出切换效果参数

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

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

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

效果参数

1. opacity 透明度必须写，取值 0~1 之间。
2. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
3. easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

自定义动画 animate

语法

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

参数

1. params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采 取驼峰命名法 borderLeft。其余参数都可以省略。
2. speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
3. easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。