jQuery的动态效果

1、显示和隐藏

show()：对象显示
hide()：对象隐藏
toggle()：对象切换（如果是显示就切成隐藏，隐藏就切成显示）

2、滑动

slideDown()：对象向上滑动
slideUp()：对象向下滑动
slideToggle()：对象滑动切换（如果是向上滑动就切成向下滑动，向下滑动就切成向上滑动）

3、淡入和淡出

fadeIn()：对象淡入
fadeOut()：对象淡出
fadeToggle()：对象切换（如果是淡入就切成淡出，淡出就切成淡入）
fadeTo()：调整对象的透明度，其中有两个参数opacity（透明度）和speed必须写
如：

$('.container').on('click',function () {
$('.container').stop().fadeTo(1000,0.5);
});

4、自定义动画

animate()：其中有一个参数params必须写，是以对象的形式传递，属性可以不带引号，复合属性采用驼峰命名
如：

$('.container').on('click',function () {
$('.container').stop().animate({
scrollTop:0,
width:120,
height:120
})
});

5、以上函数都有这3个参数，分别是speed，easing，fn

speed：为3个预定速度（如：slow，normal，fast）或者为动画时长的毫秒数（如：1000）
easing：速度切换。默认是swing（快慢快），另一个是linear（匀速）
fn：回调函数

6、动画存在一个动画队列

如果动画多次触发，会形成一个动画队列，因此需要在每次使用动画的时候先用stop（）清除动画队列，否则会很鬼畜的

• 点赞
• 收藏
• 分享
• 文章举报