这些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); 
} 

其中采用square bracket notation设置对象的属性