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

$('.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 票数: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

希望这可以帮助。

  ask by corvid translate from so

未解决问题?本站智能推荐: