jQuery动画

jQuery 1.9.0

W3C文档

教程讲解

可以方便实现DOM元素的隐藏和显示,淡入淡出,位置伸缩变换。

常用两参动画

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

语法:

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

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

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

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

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

方法:

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

    隐藏显示

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

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

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

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

    上下滑动

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

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

    淡入淡出

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

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

常用三参动画

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

自定义动画效果

    $(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的内部显示'执行完成!'。

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

透明度的指定

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

    语法:
        selector:直接作用于要改变透明度的元素

        opacity:0.0-1.0之间的任意数值

延迟与停止

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

停止

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

    语法
        selector:正在执行动画的元素

        一般不加参数,直接调用即可

延迟

    $(selector).delay(duration)

    语法

        selector:正在执行动画的元素

        duration:延迟时间单位毫秒

    实例

        $("img").delay(1000)

精彩回顾

1.
   $("img").animate({
    width:"115px",
    height:"115px",
    left:"+=90px"
    },3000,function(){
    $("#tip").html("执行完成!")
    })   
   该对象实现绝对定位(position:absolute)或相对定位(position:relative) 

2.回调函数中来嵌套动画方法来实现链式运动。

3.注意:实现动画的方法中的延迟时间,都不加引号