Transition in and out using buttons (tweenlite)

1

I’ve been looking everywhere and I don’t know what this is called.

I’m looking for an effect like this using buttons:

I could do this using a lot of '“if”'s, but surely there must be an easier way.
Here’s what I have and thanks in advance!


import com.greensock.*;
import com.greensock.easing.*;

var menu_items:Array = [item1_mc, item2_mc, item3_mc, item4_mc];

for (var i:int = 0; i< menu_items.length; i++){
    menu_items*.addEventListener(MouseEvent.ROLL_OVER,overHandler);
    menu_items*.addEventListener(MouseEvent.ROLL_OUT,outHandler);
    menu_items*.addEventListener(MouseEvent.CLICK,clickHandler );
    menu_items*.buttonMode = true;
}

function overHandler(e:MouseEvent):void{
    TweenLite.to(e.currentTarget,1,{x:0,ease:Circ.easeIn});
}
function outHandler(e:MouseEvent):void{
    TweenLite.to(e.currentTarget,1,{x:-168,ease:Circ.easeIn});
}


function clickHandler(e:MouseEvent ):void{
    if(e.currentTarget.name == "item1_mc"){
        gotoAndPlay(item1_mc);
        /* A box is in the frame with this code attached
       TweenLite.to(box2, 1, {x:65, y:200});
*/
    }
    if(e.currentTarget.name == "item2_mc"){
       gotoAndPlay(item2_mc); 
       //TweenLite.to(box2, 1, {x:65, y:200});
    }
// etc...
}