为什么这些Javascript函数产生不同的结果？

Question

我有一个功能:

var myAnimation = function(){
    $(".next_action").css({'bottom':"-100%","left":"0"}).animate({'bottom':"0"},1000);
    $('.active').animate({'top':"-100%"},1000);
}

使两个对象动画化,产生滑动效果.

为了获得多方向支持,我将参数中的位置封装起来:

 var myAnimation = function(inE,outE){
        $(".next_action").css({inE:"-100%","left":"0"}).animate({inE:"0"},1000);
        $('.active').animate({outE:"-100%"},1000);
    }

我现在可以这样称呼:

myAnimation('bottom','top');

就我而言,这些功能应该是公平的,但第一部分是有效的,第二部则不是.根本没有动画,新对象简单地跳到了位置.

Answer 1

{inE:"-100%","left":"0"}使用键inE和键创建对象left.你需要为封装与在JavaScript中引用的一个关键的唯一情况是,如果它是一个保留字(if,else等),或包含控制字符(-,:,{).

相反,你需要这样的东西;

var myAnimation = function(inE, outE) {
    var animObjA = {
        left: 0
    };
    var animObjB = {};
    var animObjC = {};

    animObjA[inE] = "-100%";
    animObjB[inE] = "0";
    animObjC[outE] = "-100%";

    $(".next_action").css(animObjA).animate(animObjB, 1000);
    $('.active').animate(animObjC, 1000);
}

其中使用方括号表示法来设置对象的属性