合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

jQuery动画的特点

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

合肥达内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培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

合肥Web前端培训带给你专业web前端知识

选择城市和中心
贵州省

广西省

海南省