问答详情
源自：5-2 jQuery中动画animate(下)

题1：specialEasing: {，easeOutBounce'分别是什么意思？ 题二的47now,fx 代表什么？step代表什么？59行now, fx代表什么？ 还有progress:代表什么？arguments[1])代表什么？求详解的撸，多谢

题1：$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

截图中题二：

{
                duration :2000,
                //每一个动画都会调用
                step: function(now, fx) {
                   $aaron.text('高度的改变值:'+now)
                }
            })
        } else if (v == "2") {
            //观察每一次进度的变化
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步动画完成后调用的一个函数，
                //无论动画属性有多少，每个动画元素都执行单独的函数
                progress: function(now, fx) {
                   $aaron.text('进度:'+arguments[1])
                    // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
                    // alert(data)
                }
            })
        }


提问者：慕仙5237505 2017-11-11 22:04

个回答

  • Camila爱学习
    2018-12-30 23:33:32

    刚学只能解答部分，如果说错欢迎指正。

    specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

    step - 规定动画的每一步完成之后要执行的函数

    progress - 每一次动画调用的时候会执行这个回调，就是一个进度的概念

    以上是定义。


    例子1中，

     step: function(now, fx) {
                       $aaron.text('高度的改变值:'+now)

    这里的，now,和 fx 应该是自定义的，我尝试换成别的字母开头的内容，并不影响动画执行。

    再说一下，例子中now出来的值是50，数据是来源于height,我在height: '50',后依次增加了 width:'100' ,和marginLeft:'20' ，可见，now出来的值是根据最后一个属性来的。


    例子2中，

    progress: function(now, fx) {

                       $aaron.text('进度:'+arguments[1])

    参考定义：progress
    Type: Function( Promise animation, Number progress, Number remainingMs )

    来源：http://api.jquery.com/animate/

    搜来的定义，arguments指的是函数的内置对象 。我的理解是，arguments（和progress一起使用）表示的是进度值，arguments[1]，表示进度是100%了，尝试改变方括号里面的值，并不影响函数执行和输出的结果，删掉方括号亦然。




    2
  • ConyZhang
    2017-11-23 13:43:05

    这样的东西需要自己百度自己去学

    0
  • ConyZhang
    2017-11-18 22:59:14

    百度去

    0