Javascript 悬停时平滑按钮增长和按钮收缩动画

我试图制作一个相当简单的动画；鼠标移到上方时，按钮将被设置为更大的动画。不悬停时，它将恢复到原始大小。但是，每当我尝试此示例代码时，它都会将按钮扭曲为奇数大小

$('.btn').hover(function() {
    $(this).removeClass('btn-primary').addClass('btn-warning');
    $(this).stop().animate({
        'height': $(this).height() * 2,
        'width': $(this).width() * 1.3
    }, 300);
}, function() {
    $(this).removeClass('btn-warning').addClass('btn-primary');
    $(this).stop().animate({
        height: $(this).height(),
        width: $(this).width()
    }, 300);
});

---

这个问题怎么解决呢？

我不太清楚为什么您的代码会失败，看起来您在返回原始大小时出现了某种计算错误。经过一番努力，我找到了这个解决办法。通过设置填充动画而不是高度和宽度，在调整链接大小时，您不必担心高宽比

$('.btn').hover(function() {
    $(this).removeClass('btn-primary').addClass('btn-warning');
    $(this).stop().animate({
        padding: '12px'
    }, 300);
}, function() {
    $(this).removeClass('btn-warning').addClass('btn-primary');
    $(this).stop().animate({
        padding: '7px'
    }, 300);
});

希望这有帮助