动画效果:
1.显示/隐藏动画效果
动态的改变当前元素的宽,高和不透明度

    show([duration],[fn]);      //显示当前元素
    hide([duration],[fn]);      //隐藏当前元素
    toggle([duration],[fn]);    //切换当前元素的可见状态
    duration:动画效果运行的时间,默认为0,立即显示元素
        关键字:"slow","normal","fast" - 0.6,0.4,0.2秒
        数字:600,400,200,... 单位是毫秒
    fn:在动画完成时执行的函数

2.淡入/淡出动画效果
动态的改变当前元素的透明度(其他不变)

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。
    fadeIn([duration],[fn])     //显示当前元素    - 淡入效果
    fadeOut([duration],[fn])    //隐藏当前元素   - 淡出效果
    fadeToggle([duration],[fn]) //切换当前元素的可见状态   -- duration默认为normal,0.4秒
    fadeTo([duration],opacity,[fn]) //在指定时间内,从当前透明度淡到指定透明度
    opacity:指定不透明值,取值范围是0-1,0代表完全透明,1代表完全不透明

3.滑入/滑出动画效果
动态的改变当前元素的高度(其他不变)

    slideDown([duration],[fn])      //显示当前元素    - 由上到下滑入
    slideUp([duration],[fn])        //隐藏当前元素    - 由下到上滑出
    slideToggle([duration],[fn])    //切换当前元素的可见状态

4.自定义动画
动态的改变当前元素的各种CSS属性

    animate(properties,[duration],[fn])
    properties:使用一个"name:value"形式的对象,{name:value,name:value,...},用来设置改变的css属性
    animate():只能改变可以取数字值的css属性,如大小,边框,定位,字体,背景,...
    移动元素是需要显示元素的position属性为absolute/relative.
    "队列"动画:元素执行多个动画效果,即元素执行多个animate()方法,按照方法的顺序进行动画效果的展示.

5.动画停止
stop()结束当前动画,立即进入到下一个动画

    stop([clearQueue],[gotoEnd])
    clearQueue:是否清空未执行完的动画队列.设置true,可以立即结束动画
    gotoEnd:是否立即完成正在执行的动画.设置true,并且重设show和hide的原始样式,调用回调函数等
扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄