美文网首页
JQuery动画

JQuery动画

作者: 向上而活 | 来源:发表于2019-05-26 19:37 被阅读0次

简化版动画函数

显示/隐藏: $(...).show();    $(...).hide();   $(...).toggle()
无参数的show()/hide()使用的是display属性瞬间隐藏和显示

动画

**参数speed**
    1. 三档: fast  normal  slow
            2. 用毫秒数自定义动画时长
**动画的速度变化**
    easing:  linear  swing
**伸缩**
    slideUp()    slideDown()     slideToggle()
**淡入淡出**
    fadeIn()    fadeOut()     fadeToggle()

    问题:效果受局限

万能动画函数 animate()

  animate()可对数值类型的CSS样式执行定时器动画,包括 宽高,位置,透明度,边框宽度,字体大小,注意,不能对非数值类型属性做动画,比如 颜色,背景图片,字体,display
  $(...).animate(params,speed,easing,fn)

其中:
 params是所有变化的css属性的目标值: 比如: {css属性1: 值1, css属性2:值2,...},注意 css属性名要去横线变驼峰,值要加单位
 speed: 动画持续时间/速度
 easing: 速度变化效果
 fn: 动画结束后,自动调用的回调函数

动画中的排队和并发

排队: 多个动画顺序,先后执行
 $(...).animate({属性1:值1,...},ms).animate({属性2:值2,...})
 先对属性1执行动画效果,再对属性2执行动画效果

    并发: 多个动画同时执行
 $(...).animate({属性1:值1,属性2:值2},ms)
 同时修改属性1和属性2

相关文章

  • jquery动画和循环

    jquery特殊效果 jquery动画 jquery循环

  • jQuery特殊效果

    jQuery特殊效果 jQuery动画

  • jQuery 效果

    目录 jQuery 隐藏/显示jQuery 淡入淡出jQuery 滑动jQuery 动画jQuery Callba...

  • JQuery动画,事件

    jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法...

  • jQuery动画、循环

    1、jQuery特殊效果 2、jQuery动画 3、jQuery循环

  • JS-17day

    1、jQuery特殊效果 2、jQuery动画 3、jQuery循环

  • JQuery:动画

    jquery动画:

  • jQuery动画

    jQuery动画

  • jQuery动画队列

    jQuery 动画队列 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就...

  • jquery实战

    jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件 自定义事件

网友评论

      本文标题:JQuery动画

      本文链接:https://www.haomeiwen.com/subject/stvftctx.html