自学分享--jQuery-事件和动画调用
1.事件
1.1添加事件
一般添加事件
$().事件名(function(){
函数体
})
事件监听
$().on(evebtType,[selector], [data], callback)
evenType:事件类型 如 click (类似addlistener)
selector:可选参数,用于事件委托
data:可选,传递参数
callback: 事件触发后执行的回调函数
绑定多个事件
$().on({
click: function(){},
mouseover: function(){}
})
//多个事件绑定同一个函数
$().on(‘click mouseout’,function(){})
事件委托(1.事件,2.选择器,3.函数)
$().on(‘click’, ‘li’,function(){})
绑定一次事件one(事件,)
$().one(eventType,[data], callback)
1.2移除事件
$().off(eventType,[selector],[callback])
$(’ button’).off()//移除全部
$(’ button’).off( 'click ‘)//移除所有的click
$( ’ button’).off( 'click ', fn2)//移除click事件的 fn2，fn1保留
1.3事件切换
$().hover([overCallback,outCallback])
1.4自定义
$().trigger(eventType,[data])
用途:一般用于模拟行为，比如模拟虚拟键盘触发实体键盘，播放器。
$(‘myvideo’).trigger(‘play’)
1.5事件对象
$().on(‘click’,function(e) {})
2.动画
2.1内置动画
show([speed], [easing], [fn]) //显示
hide([speed], [easing], [fn]) //隐藏
toggle([speed], [easing ], [fn ]) //显示/隐藏
fadeIn([speed], [easing ], [fn ]) //淡入
fadeOut([speed], [easing ], [fn ]) //淡出
fadeToggle([speed], [easing ], [fn ]);//淡入和淡出效果
fadeTo([speed], [easing ], [fn ]) //不透明度以渐进方式调整到指定的不透明度
slideDown([speed], [easing ], [fn ]) //通过高度变化（向下增大）来动态地显示所有匹配的元素
slideUp([speed], [easing ], [fn ])//通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideToggle([speed], [easing ], [fn ])
- speed: (“slow”, “normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
- fn: 在动画完成时执行的函数，每个元素执行一次。
- easing: (Optional) 用来指定切换效果，默认是 “swing”，可用参数 “linear”，想要更多效果可以使用插件 jqurry-easing
2.2自定义动画
$().animate(params,[ speed]，[easing]，[fn])
*params:以对象的形式传递,驼峰写法,只能改变有数值的属性.
//动画调用
每次调用animate()时,都会加入到一个动画队列中,然后依次执行队列中的动画
//延迟动画
.delay(time)
暂停动画
.stop([clearQueue],[gotoEnd])
*参数1: false 立即停止当前动画，然后执行下一个动画;
*参数1: true立即停止所有动画;
*参数2: false定格当前动画位置;
*参数2:true 定格到当前动画结束的位置。
两个都是 false，默认参数，保留当前状态，并立即执行下一个动画$( ".box ').stop()
第一个是true,第二个是false,停止所有动画,并直接定格当前状态不再改变
$( ‘.box ‘).stop(true)
第一个是false,第二个是ture,停止当前动画，并瞬间到达当前动画设定的状态，然后继续下一个动画
$( ‘.box’).stop(false, true)
两个false,停止所有动画，并定格当前动画结束状态
$(’.box’).stop(true,true)