猿问

animate下那一节的代码有些不懂?

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    p {
        color: red;
    }
    
    div {
        width: 200px;
        height: 100px;
        background-color: yellow;
        color: red;
    }
    a{
        display: block
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>animate(下)</h2>
    <p>慕课网,专注分享</p>
    <div id="aaron">内部动画</div>
    点击观察动画效果:
    <select id="animation">
        <option value="1">动画step动画</option>
        <option value="2">动画progress回调</option>
    </select>
    <a></a>
    <input id="exec" type="button" value="执行动画">
    <script type="text/javascript">
    $("#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)
                }
            })
        } 
    });
    </script>
</body>

</html>

请问

step: function(now, fx)

里的now 和 fx 两个参数什么意思?

还有

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

这句里的arguments[1]这个什么意思?我百度了,可是还是不太懂。不懂干什么的,怎么用,求大神解惑。

续写不尽的未来3319689
浏览 1689回答 3
3回答

Lemon156

首先跟你讲一下animate(properties, options)其中options是一个对象,可以包含:duration,easing, queue,step,progress,complete,start等等这里我说一下step,其他不懂的你再百度一下。animate()方法有个step参数规定动画执行的每一步都要执行step这个回调函数。使用一个不影响元素效果显著的css值来触发animate()开发方法 ,然后在step回调函数中修改我们想要修改的值,这样就可以间接地实现动画了。now:是当前动画正在改变的属性的实时值,在这里是属性height;fx::jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如:执行动画的元素:elem,动画正在改变的属性:prop,正在改变属性的当前值:now,正在改变属性的结束值:end等。在这里改变animate第1个参数中设置的属性height在动画正在改变时的值。Arguments该对象代表正在执行的函数和调用它的函数的参数。function (a,b){     arguments[n]}function:表示正在执行的函数; n :要传递给 Function 对象的从0开始的参数值索引。说明Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象。Arguments是一个类似数组但不是数组的对象,说它类似数组是因为其具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length。还有就是arguments对象存储的是实际传递给函数的参数,而不局限于函数声明所定义的参数列表,而且不能显式创建 arguments 对象。arguments 对象只有函数开始时才可用。看个例子function testArguments (a,b,c,d,e,f) {  // body...假设a=2,b=4,c=8,d=10,e=9,f=30;  var num=arguments.length;  alert(arguments[1]);}这里打印出来的是参数b的值4;望采纳

Lemon156

arguments[1]是调用progress: function(now, fx) 中的fx,你可以用浏览器的控制台进行查看希望可以帮到你
随时随地看视频慕课网APP
我要回答