在Jquery中对mouseenter进行动画处理

Question

我正在尝试创建一个聊天框，该聊天框在被按下时会删除阴影并在右下角进行动画处理（以使其看起来像在被按下）

这是代码：

$('.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 
    });
});

我遇到的问题是，当我在元素上快速移动鼠标时，位置将开始越来越远地移动到其应有的位置。

我试图将stop函数添加到动画中，但这只是匆匆执行动画，并且值仍处于关闭状态。 有人可以指出我正确的方向吗？ 对于这个问题，可能有一个非常简单的解决方案，我只是无法解决。 如有必要，我将发布JSfiddle。

Answer 1

经过进一步的思考，我看到了我的错误：我没有设置顶部和左侧的位置，而是对其进行了设置，这对html的工作方式存在一些误解

$('.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 
});
});