부드럽게 버튼이 커지고 버튼이 호버로 움직입니다.

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

희망.