在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 
});
});