Почему эти функции 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);
}

В котором используется квадратная скобка для установки свойств объектов