javascript - Variable in place for x does't work in transit.js -

i using transit.js , have following lines of code:

var axis = math.floor(math.random() * 2); axis = genxy(axis);  if($(this).hasclass(btn_classname)) {            $(this).transition({ axis : '100px' } , function(){         $(this).addclass('active');         $(this).transition({ axis :  0 , duration : 2000 });     })    }  

the genxy function below:

var xy = ['x' , 'y'];  function genxy(no) {     return xy[no]; } 

now ran below simple test on single element(in devtools):

var axis = x; $('.gridbox .large').eq(2).transition({ x : "100px" }); 

the above line of code works perfect , i.e. transitions element 100px , if replace x axis , variable indeed x , code looks below:

var axis = x; $('.gridbox .large').eq(2).transition({ axis : "100px" }); 

the above line does't work . why work ? afterall axis x , can explain ?

actually, putting key object can't done that:

var axis = x; $('.gridbox .large').eq(2)              .transition({ axis : "100px" }); // <----see object { axis : "100px" } 

if try putting var name in place of key in object literal, doesn't refer value of sets new key:value in object. in es5 , earlier, cannot use variable property name inside object literal.

so, can done:

var obj   = {}, // new object creation     axis  = x;  // reference x  obj[axis] = '100px'; // results in {x:"100px"}  $('.gridbox .large').eq(2)              .transition(obj); // <---put object here