jquery中的动画和事件

    xiaoxiao2021-03-25  99

    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()以不透明度来隐藏和显示

    转载请注明原文地址: https://ju.6miu.com/read-21157.html

    最新回复(0)