jquery动画特效
0
悬赏园豆：20
[已解决问题]
解决于 2021-04-16 09:33
使用jquery实现字体放大的动画特效，在谷歌浏览器中为啥会出现字体先缩小后放大的效果呢？
问题补充：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>停止动画</title>
<script src="jquery-3.6.0.min.js"></script>
<script>
$(function () {
$(".start").click(function () {
$("div").animate({ left: '250px' }, 5000);
$("div").animate({ fontSize: '3em' }, 5000);
})
})
</script>
</head>
<body>
<button class="start">开始</button>
<button class="stop">停止</button>
<button class="stopall">停止所有</button>
<button class="stop-action">停止动画，但完成动作</button>
<div style="background: hotpink;height: 100px;width: 200px;position:absolute;margin-top: 20px; ">
hello</div>
</body>
</html>
最佳答案
0
jquery版本问题。
测试之后3.3.1以上版本（包括）会有这个问题，尝试用3.2.1后问题解决。
收获园豆：20
你自己试一下
@mowen285: 刚试了下3.2.0版本，有正常放大，谢谢
其他回答(3)
0
结论只有一个。你的字体默认大小 > 3em
所以会先缩小，再放大
谷歌默认的字体是16px，16px是小于3em的吧
0
这是谷歌浏览器自己的问题，谷歌浏览器显示最小字号是 12 像素，小于 12 像素的字体在取值的时候也会得到 12 像素，而其它浏览器会得到正确的值，因此，在 jQuery 做动画取值计算的时候产生了误差
你是说它会从默认的16px变回12px然后在放大么？
0
可以先设置个初始字体大小再试试