What I would do is get the position of the #stone and the position of the character and check to see when they are the same if they are the same I would return false and set a flag canMoveRight to false.
I assume that a keydown event handler would be used and the distance would be 1px and first I check if the layers overlap and proceed accordingly
var canMoveRight = true;
$("#character")
.on(
{
keydown : function()
{
if(checkLayerOverlap())
$("#character").stop();
else
move(1);
return false;
}
}
);
function move(distance)
{
$("#character").animate({
right : "+=" + distance + "px"
},"slow");
}
function checkLayerOverlap()
{
var isOverLapping = false;
var characterPosition = $("#character").position();
var stonePosition = $("#stone").position();
if(characterPosition.right == stonePosition.right)
{
canMoveRight = false;
isOverLapping = true;
}
return isOverLapping;
}
of course all that logic should be expressed in objects so your $("#character") would be
var Character = {
canMoveRight = true,
move : function(distance)
{
//code here
}
}
this is just a hint :)