平滑按鈕增長和按鈕上的動畫縮小

Question

我正在嘗試製作相當簡單的動畫;在鼠標懸停時，按鈕將變得更大。當不懸停時，它將恢復到原來的大小。但是，只要當我嘗試此示例代碼，它扭曲按鈕奇大小

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

http://jsfiddle.net/RBLqY/1/

怎麼會這樣解決？

Answer 1

我不完全確定爲什麼你的代碼失敗了，看起來像是在返回原始大小時出現某種計算錯誤。擺弄了一下後，我發現了這個解決方案。通過填充填充而不是高度和寬度，在調整鏈接大小時不必擔心高度寬度比。

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

jsfiddle

希望這有助於。