Question

I have a function:

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

that takes two objects an animates them, producing a sliding effect.

In order to get multiple direction support, I encapsulated the positions in arguments:

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

Which I can now call thusly:

myAnimation('bottom','top');

As far as I am concerned, these functions should be extactly equivelent, but the first works, the second does not. No animation takes place at all, the new object simple jumps into position.

Answer 1

{inE:"-100%","left":"0"} creates an object with a key inE and a key left. The only time you need to enclose a key with quotes in JavaScript is if it is a reserved word (if, else etc), or contains control characters (-, :, {).

Instead you’ll need something like this;

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

Which uses square bracket notation to set the properties of the objects