jQuery效果

显示隐藏

语法

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

参数

参数都可以省略，无动画直接显示
speed：三种预定速度之一的字符串（'slow','normal','fast'）或表示动画时长的毫秒数值（如：1000）
easing：用来指定切换效果，默认是'swing'，可用参数'linear'
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) //渐进方式调整到指定的不透明度

参数

opacity透明度必须写，取值0～1之间
speed：三种预定速度之一的字符串（'slow','normal','fast'）或表示动画时长的毫秒数值（如：1000）
easing：用来指定切换效果，默认是'swing'，可用参数'linear'
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()
})

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

动画或效果队列

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

停止排队

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

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

自定义动画animate

语法

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

params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法borderLeft。其余参数可以省略
speed：三种预定速度之一的字符串（'slow','normal','fast'）或表示动画时长的毫秒数值（如：1000）
easing：用来指定切换效果，默认是'swing'，可用参数'linear'
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()
})

事件

事件注册（单个）

element.事件（function(){}）

$('div').click(functiion(){事件处理程序})

事件处理（多个）

绑定 on（）

优势一

可以绑定多个事件，多个处理事件处理程序

$('div').on({
	mouseover:function(){},
        mouseout:function(){},
    	click:function(){}
})

如果事件处理程序相同

$('div').on('mouseover mouseout',function(){
	$(this).toggleClass('current')
})

优势二

可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

$('ul').on('click','li',function(){
	alert('hello world')
})

优势三

动态创建的元素，click()没有办法绑定事件，on（）可以给动态生成的元素绑定事件

$('ol').on('click','li',function(){
	alert(11)
})
let li =$('<li>我是后来创建的</li>')
$('ol').append(li)

解绑off

off（）方法可以移除通过on（）方法添加的事件处理程序

$('p').off() //解绑p元素所有事件处理程序
$('p').off('click') //解绑p元素上面的点击事件
$('ul').off('click','li') //解绑事件委托

自动触发事件

有些事件希望自动触发，比如轮播图自动播放功能和点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

element.click() //第一种简写形式
element.trigger('type') //第二种自动触发模式

$('p').on('click',function(){
	alert('hi')
})
$('p').trigger('click') //此时自动触发点击事件，不需要鼠标点击

element.triggerHandler(type)  //第三种自动触发模式，不会触发元素的默认行为

事件对象

事件被触发，就会有事件对象的产生

element.on(events , [selector] , function(event){}) 阻止默认行为：event.preventDefault() 或者 return false 阻止冒泡：event.stopPropagation()

jQuery对象拷贝

如果想要把某个对象拷贝（合并）给另一个对象使用，此时可以使用$.extend()方法

$.extend([deep] , target , object1 , [objectN])

deep：如果设为true为深拷贝，默认为false为浅拷贝
target：要拷贝的目标对象
object1:待拷贝到的第一个对象的对象
objectN：待拷贝到的第N个对象的对象
浅拷贝是拷贝内存地址，修改目标对象会影响被拷贝对象
深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象

jQuery动画效果+事件