Почему эти функции 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 установить свойства объектов