zoukankan      html  css  js  c++  java
  • jquery_事件与动画

    事件绑定

        bind(type[,data],fn)(无限触发)

            type:事件类型包括jquery中已有事件也可以自定义事件

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

             fn:是用来绑定的处理函数 

        one(type[,data],fn)(只触发一次)

    合成事件

     hover(enter,leave);用于模拟光标悬停事件

     toggle(fn1,fn2,...fn);模拟鼠标连续单击事件

    事件冒泡

        如果内外元素绑定了同一事件,那么点击里面事件外面事件也会触发

        解决方法:添加事件对(event)      event.stopPagation()停止事件冒泡

    阻止默认行为 :

        网页中的元素都有自己的默认行为 (单击超链接之后会跳转,表单的提交)

         event.preventDefault()   (return false)         阻止默认行为

    事件对象属性:

           event.type()获取到事件的类型

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

           event.pageX()和event.pageY() 获取光标相对于页面的x坐标和y坐标

           event.which()在鼠标单击事件中获取到鼠标的左,中,右键,在键盘事件中获取键盘的案件(1:鼠标左键:2鼠标中键:3鼠标右键)

           event.metaKey()获取<ctrl>按键

           event.originalEvent()指向原始的事件对象

    移除事件:

          unbind([type],[,data])

           data:将要移除的函数

            如果没有参数则删除所有绑定事件

    模拟操作:

          tigger(type[,data]) 可自定义也可以用jquery里本身的方法

    动画

        show()显示  可填参数

        hide()隐藏  可填参数

        fadeIn() fadeOut()改变元素的不透明度

        slideUp() slideDown()改变元素高度 到0为止

        slow :0.6秒

        normal:0.4秒

        fast:0.2秒

    自定义动画

     animate(params,speed,callback)

    params:一个包含样式属性及值的映射

    speed:速度,可选

    callback:在动画完成时执行的参数 可选

    累加 ,减: +=,-=

    多重动画:后面在添加

     animate({left:"500px"},3000).animate({height:"500px"},5000)

    停止动画

     stop([clearQueue][gotoEnd]):

     clearQueue:是否清空未执行的动画队列

     gotoEnd:是否直接将正在执行的动画跳转到末状态

    直接调用stop()停止正在执行的动画

    判断元素是否处于动画状态

      $(element).is(":animated")

    toggle()  切换元素可见状态

    slideToggle() 高度

    fadeTo(600,0.2) 透明度

    动画队列

     一组元素上的动画效果

      当在以一个animate()方法中应用多个属性时,动画是同时发生的

      链式,按顺序发生

    多组元素上的动画效果

     默认情况下,动画都是同时发生的

     回调,按顺序

  • 相关阅读:
    动态内存
    数组
    localstorage基础
    xampp 虚拟机配置
    浏览器兼容性问题积累
    做动画的一大接口 requestAnimationFrame
    canvas 基础
    svn--confilct了怎么办?
    【javascript设计模式】构造器模式、模块模式、单例模式
    关于优雅降级和渐进增强
  • 原文地址:https://www.cnblogs.com/shuaif/p/3429882.html
Copyright © 2011-2022 走看看