在 Jquery 中为 mouseenter 上的阴影设置动画答案

【问题标题】：Animating a shadow on mouseenter in Jquery在 Jquery 中为 mouseenter 上的阴影设置动画
【发布时间】：2013-12-27 04:20:42
【问题描述】：

我正在尝试创建一个聊天框，当按下它时，它会移除阴影并动画到右下角（这样看起来就像被按下了一样）

代码如下：

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

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

我尝试将停止功能添加到动画中，但这只会加快动画速度，并且值仍然关闭。有人可以指出我正确的方向吗？这个问题可能有一个非常简单的解决方案，我只是无法理解它。如有必要，我会发布一个 JSfiddle。

【问题讨论】：

标签： javascript jquery html css logic

【解决方案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 
});
});

【讨论】：