Collision detection for keyboard controlled character

I have a charaacter controlled with keyoard to move around the stage and it works fine. I have a square on the stage as well and I would like to atop the character moving over the square. I'l like to stop it when it gets to the square. Also I'd like the character to stay withing the satge. I know I need collision detection. I looked at JQuery Collision but I dont get it.

I know how I would do it in flash but cannot at all figureout how to even start in animate.

This is the code to move my character around.

if (e.which == 39)

{

sym.$(Stage_NewGirl).animate({left: "+=50px"}, 0);

}

if (e.which == 37)

{

sym.$(Stage_NewGirl).animate({left: "-=50px"}, 0);

}

if (e.which == 38)

{

sym.$(Stage_NewGirl).animate({top: "-=50px"}, 0);

}

  if (e.which == 40)

{

  sym.$(Stage_NewGirl).animate({top: "+=50px"}, 0);

}

Can anyone help?