Блог

У меня есть функция:

 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');
  

Насколько я понимаю, эти функции должны быть полностью эквивалентны, но первая работает, вторая — нет. Анимация вообще не выполняется, новый объект просто переходит в нужное положение.

{inE:"-100%","left":"0"} создает объект с ключом inE и key 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);
}
  

Который использует обозначения в квадратных скобках для задания свойств объектов