平滑按钮增长和按钮缩小动画悬停

时间:2014-04-20 02:00:11

标签: javascript jquery html css animation

我想制作一个相当简单的动画;鼠标悬停时,按钮的动画会更大。不悬停时,它将恢复原始大小。但是,每当我尝试这个示例代码时,它都会将按钮变为奇数

$('.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/

怎样才能解决这个问题?

1 个答案:

答案 0 :(得分: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

希望这有帮助。