jQuery-动画效果

一、显示与隐藏效果

显示

1. 显示语法规范

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

2. 显示的参数

参数都可以省略，无动画直接显示

speed：三种预定速度之一的字符串（"slow", "normal", "fast"）或表示动画时长的毫秒数值（如：1000）

easing：用来指定切换效果，默认是 "swing" ，可用参数 "linear"

fn：回调函数，在动画完成时执行的函数，每个元素执行一次

隐藏

1. 隐藏语法规范

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

2. 隐藏的参数

和show一样

切换

1. 切换语法规范

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

2. 切换的参数

同上

二、滑动效果

下滑显示，上滑隐藏

下滑

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

上滑

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

切换

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

三、事件切换

鼠标经过和离开的复合写法

hover([over], out)

over：鼠标移到元素上时要触发的函数（相当于mouseenter）

out：鼠标移出元素时要触发的函数（相当于mouseleave）

事件切换hover如果只写一个函数，那么鼠标经过和离开都会触发这个函数

$(".nav>li").hover(function(){
    $(this).children("ul").slideToggle();
})

四、动画队列及停止排队方法

1. 动画或效果队列

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

2. 停止排队

stop()

用于停止动画或效果

注意：stop() 必须写到动画或效果的前面，相当于停止上一次的动画

$(".nav>li").hover(function(){
    $(this).children("ul").stop().slideToggle();
})

五、淡入淡出效果

淡入

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

淡出

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

淡入淡出切换

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

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

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

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

speed 必须写

六、自定义动画 animate

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

params：想要更改的样式属性，以对象形式传递，必须写，属性名可以不带引号，如果是符合属性则需要采用驼峰命名法，其余参数都可省略