jquery中的动画和事件


1.事件绑定

   bind(type[,data],fn)

type: blur,focus,  mouseover,mouseout等等

data可选的,作为event.data属性值传给事件对象的额外数据

fn:绑定的处理函数


2.合成事件

hover(enter,leave)当鼠标移动到元素上时,触发enter事件,当移出这个元素时,触发leave事件

toggle(f1.f2.f3...fn):点击一次触发f1,然后再次点击触发f2,然后再次点击触发f3。


3.事件冒泡

      点击当前元素,触发事件,然后又触发了当前元素父元素的点击事件。

$(xxx).bind(xxx,function(event){
xxxx
event.stopPropagation();//可以停止事件冒泡,可以简写为return false;
})
event.preventDefault()方法来阻止元素的默认行为。可以简写为return false;


4.事件捕获

      和冒泡顺序相反,从最外层开始往里面触发。jquery不支持事件捕获


5.事件对象的属性

event.type:获取事件的类型

event.target:获取触发事件的元素

event.relatedTarget:相关元素

event.pageX,event.pageY:获取光标相对于页面的x坐标和y坐标。

event.which:获取鼠标的左中右键,对应1,2,3

event.mataKey:键盘事件中获取ctrl按键


6.移除事件

unbind([type][,data])

1.没有type删除所有事件

2.其他的都是根据type和data删除


one()触发一次之后删除


7.模拟操作

$("#id").triggle("click")==$("#id").click();



动画

1.show()和hide()

show("slow") 

show(1000)


2.fadeIn()和fadeOut()//淡入淡出

3.slideUp()和slideDown()//滑入滑出

4.animate(params,speed,callback)

params:包含样式和值的映射{“property1”:"value1",“property2”:"value2"}

speed:速度参数,可选

callback:动画完成后执行的函数,可选

animate({left:"+=500px"},300)left累加500px


stop([clearQueue],[gotoEnd]):停止动画

都是boolean值,前一个表示是否清空未执行完的队列,后一个表示是否将正在执行的动画跳到动画末状态。

直接使用stop()表示立即停止当前动画,


is(":animated")可以判断是否一个元素处于动画状态

delay(1000)可以延迟动画


toggle()可以实现隐藏和显示

slideToggle()会以高度的变化隐藏和显示

fadeTo():表示可以调整不透明度。fadeTo(0.2)。

fadeToggle()以不透明度来隐藏和显示


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值