jQuery效果

显示隐藏

语法

• show(speed,easing,fn)
• hide(speed,easing,fn)
• toggle(speed,easing,fn)

参数

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

滑动

语法

• slideDown(speed,easing,fn)
• slideUp(speed,easing,fn)
• slideToggle(speed,easing,fn)

淡入淡出

语法

• fadeIn(speed,easing,fn)
• fadeOut(speed,easing,fn)
• fadeToggle(speed,easing,fn)
• fadeTo(speed,opacity,easing,fn) //渐进方式调整到指定的不透明度

参数

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

事件切换

hover（[over]，out）

• over：鼠标移动到元素上要触发的函数（相当于mouseenter）
• out：鼠标移出元素要触发的函数（相当于mouseleave）

1.事件切换hover就是鼠标经过和离开的复合写法
$('.nav>li').hover(()=>{
	$(this).children('ul').slidDown(200)
},()=>{
	$(this).children('ul').slideDown(200)
})
2.事件切换hover 如果只写一个函数，那么鼠标经过和离开都会触发这个函数
$('.nav>li').hover(()=>{
	$(this).children('ul').slideToggle()
})

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

1. 动画或效果队列

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

2. 停止排队

• stop()
• 用于停止动画或效果
• 注意:stop（）写到动画或效果的前面，相当于结束上一次的动画

$('.nav>li').hover(()=>{
	$(this).children('ul').stop().slideToggle()
})

自定义动画animate

语法

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

参数

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

手风琴案例

$(function(){
	$('.king li').mouseeter(()=>{
    	//1.当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入
           $(this).stop().animate({
           	width:224
           }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn()
    })
    	//2.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出
           $(this).siblings('li').stop().animate({
           	width:69
           }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut()
})