我正在尝试制作一个相当简单的动画;在鼠标悬停时,按钮将动画变大。当不悬停时,它会恢复到原来的大小。但是,每当我尝试此示例代码时,它都会将按钮变形为奇数大小
$('.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);
});
希望这对您有所帮助。
关于javascript - 悬停时平滑按钮增长和按钮收缩动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23177619/