课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > jQuery动画的特点
  • jQuery动画的特点

    发布:合肥web培训      来源:达内新闻      时间:2016-05-26

  • 合肥达内web培训专家介绍一下jQuery动画的特点。

    常用两参动画

    可实现元素淡入淡出,隐藏显示,上下滑动

    语法:

        $(selector).####(speed,[callback])

        selector: 获取的DOM元素,动画效果要作用的对象,
                  根据方法不同会有所差异。

        ####:  通用方法名的代替,具体方法名如下

        speed: 动画完成的时间
               单位毫秒同时也可作使用"slow","fast"

        callback: 动画完成之后立即触发的回调函数。

    方法:

        符合两参型的方法共有一下八个,
        分为隐藏显示.上下滑动,淡入淡出

    1、隐藏显示

            selector直接作用于要隐藏和显示的元素

            show(): 显示获取到的隐藏元素
                    通常属性具有display:none的元素

            hide(): 隐藏获取到的元素

            toggle():当执行该语句时,方法会自动判断此时元素的状态,
                     并状态的切换

    2、上下滑动

            selector对用于包裹层(如div),将通过该元素上下滑动
            来隐藏和显示里面的元素

            slideUp():向上滑动,将隐藏内部元素
            slideDown():向下滑动,将显示内部元素
            slideToggle():根据现有状态来向上或向下滑动元素

    3、淡入淡出

            selector直接作用于要淡入淡出的元素

            fadeIn():淡入该元素,页面不再显示
            fadeOut():淡出该元素,页面会显示

    常用三参动画

    位置及形状的伸缩变换,以及透明度的指定。

    1、自定义动画效果

        $(selector).animate({params},speed,[callback])

    语法

            selector:直接选定动画要作用的元素
            {params}:为制造动画效果的CSS属性名和值

    实例:

            $("img").animate({
                width:"115px",
                height:"115px",
                left:"+=90px"
            },3000,function(){
                $("#tip").html("执行完成!")
            })

    当时img元素的宽度和高度变为115px,并向右90px,
    同时在id为tip的内部显示'执行完成!'。

    注意:

    要实现元素移动时,应设置该元素为
    绝对定位或相对定位  
    属性名不加引号

    2、透明度的指定

        $(selector).fadeTo(speed,opacity,[callback])

    语法:

    selector:直接作用于要改变透明度的元素
    opacity:0.0-1.0之间的任意数值

    延迟与停止

    在动画的执行时,可随时取消或延迟一定时间的在执行

    1、停止

        $(selector).stop([clearQueue],[goToEnd])

    语法
    selector:正在执行动画的元素
    一般不加参数,直接调用即可

    2、延迟

    $(selector).delay(duration)

    语法

    selector:正在执行动画的元素
    duration:延迟时间单位毫秒

    实例
        $("img").delay(1000)

    总结:合肥达内web培训专家再次强调一些重点知识:回调函数中来嵌套动画方法来实现链式运动。 实现动画的方法中的延迟时间,都不加引号。

    推荐文章

上一篇:15个web开发工具

下一篇:JavaScript 数字的常用属性方法

最新开班日期  |  更多

WEB零基础全日制班

WEB零基础全日制班

开班日期:1-20

WEB零基础周末班

WEB零基础周末班

开班日期:1-20

WEB前端业余班

WEB前端业余班

开班日期:1-20

WEB前端就业班

WEB前端就业班

开班日期:1-20

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56