Animating a shadow on mouseenter in Jquery

Question

I'm trying to create a chatbox that when pressed, removes the shadow and animates to the bottom right (so that it looks like it's being pressed)

Here's the code:

$('.chatbox').mouseenter(function() {
    var top1 = parseInt($(this).css('top')); 
    var left1 = parseInt($(this).css('left')); 
    top1 += 10; 
    left1 += 10; 
    $(this).css('box-shadow', '1px 1px 5px #000000'); 

    $(this).stop(true, true).animate({
        top: top1, 
        left: left1 
    }); 
}).mouseleave(function() {
    var top1 = parseInt($(this).css('top')); 
    var left1 = parseInt($(this).css('left')); 
    top1 -= 10; 
    left1 -= 10; 
    $(this).css('box-shadow',  '10px 10px 5px #888888'); 

    $(this).stop(true, true).animate({
        top: top1, 
        left: left1 
    });
});

The problem i'm having is that when I move the mouse rapidly over the element the position will start to move farther and farther away from where it's supposed to be.

I tried to add the stop function to the animation but that just rushes the animation and the values are still off. Can someone point me in the right direction? There's probably a pretty simple solution to this problem I just can't wrap my head around it. I'll post a JSfiddle if necessary.

Answer 1

Upon further reflection I see my mistake: Rather than add to the top and left I just set them, minor misunderstanding of how html works :)

$('.chatbox').mouseenter(function() {
$(this).css('box-shadow', '1px 1px 5px #000000'); 

$(this).stop(true, true).animate({
    top: 10, 
    left: 10
}); 
}).mouseleave(function() {

$(this).css('box-shadow',  '10px 10px 5px #888888'); 

$(this).stop(true, true).animate({
    top: 0, 
    left: 0 
});
});