jQuery动画与特效--jQuery基础知识点(4)

jQuery中众多的动画与特效方法为提高页面的用户体验度带来了极大的方便！

1. 要使页面中的元素以动画效果移动，必须首先将该元素的"position"属性设置为"relative"或"absolute"，否则无法移动该元素的位置。

2. 显示与隐藏

    show(speed,[callback]) [callback]为在动画完成时执行的回调函数

    hide(speed,[callback])

    toggle()

    toggle(switch)  true:显示   false:隐藏

    无论是show()和hide()还是toggle()方法，当以动画效果切换页面可见状态时，其元素的width、height、padding和margin属性都将以动画的效果展示。

3. 滑动

    slideToggle()

    slideDown()   slideUp()

4. 淡入淡出0.0-->1.0

    fadeIn()  fideOut()

    元素的width和height属性不发生变化，仅是改变元素的透明度

    将透明度指定到某一值：fadeTo(speed,opacity,[callback])

5. 自定义动画：animate(params,[duration],[easing],[callback])

    例：$(this).animate({

width:"20%",

height:"70px"

},3000,function(){ //动画完成后执行的回调函数

$(this).css({"border":"solid 3px #666"})

          .html("变大了");

})

   })

6. 动画停止和延时

    stop([clearQueue],[gotoEnd])

    [clearQueue]表示是否停止正在执行的动画，[gotoEnd]表示是否立即完成正在执行的动画

    delay(duration,[queueName])

    duration为延时的时间值，单位为毫秒值

    例：$("img").delay(2000).slideToggle(3000);

           以上代码说明：延迟后不能自动恢复

7. 动画改变元素属性情况

8. 自定义元素的动画效果可以实现其他动画效果

   (1) animate()方法代替hide()方法

        $("页面元素").hide(600);

        $("页面元素").animate({height:"hide",width:"hide",opacity:"hide"},600);

   (2) animate()方法代替fadeOut()方法

        $("页面元素").fadeOut(600);

        $("页面元素").animate({opacity:"hide"},600);

   (3) animate()方法代替sildeUp()方法

        $("页面元素").sildeUp(600);

        $("页面元素").animate({height:"hide"},600);

   (4) animate()方法代替fadeTo()方法

        $("页面元素").fadeTo(600,"0.8");

        $("页面元素").animate({opacity:"0.8"},600);