这个step、progress有什么作用,怎么用的?arguments中的数组的值是从哪里传递过来的?动画step动画的显示效果为什么会从100减到50,是怎么实现的?第二按钮的效果为什么显示两行,最终进度为什么是1?

来源:5-2 jQuery中动画animate(下)

1234323181

2016-11-21 15:57

$("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //观察每一次动画的改变
            $aaron.animate({
                height: '50'
            }, {
                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)
                }
            })
        }
    });

写回答 关注

2回答

  • 懒惰的猫想吃鱼
    2017-06-22 10:51:36

    感谢!

  • angeliuwj4109780
    2016-11-21 22:20:10

    1、.animate(properties,options)中包含两个参数,options参数包括几种,其中step:规定每个动画的每一步完成之后要执行的函数;progress:每一次动画调用的时候会执行这个回调,就是一个进度的概念。

    2、arguments中数组值代表函数第几个参数。这里arguments[1]代表第二个参数,则是代表fx。

    3、这个程序没有提供完整,在程序上面应该会定义原先的块级高度是100,动画中目标高度是50,所以执行动画时从100减到50。

    4、显示为1代表动画进度完成到百分百。效果为两行不知道是什么意思,看定义的样式。



    yelllo...

    请教一个问题啊,那个now是什么意思,arguments[0]是代表now吗,输出结果是object object啊,还有arguments[3]同样存在,是剩余的动画时间,这个就有点说不通了

    2017-07-06 10:04:52

    共 3 条回复 >

jQuery基础(四)—动画篇

jQuery基础教程动画篇,讲解jQuery基础开启动画修炼

85058 学习 · 262 问题

查看课程

相似问题