首页 新闻 搜索 专区 学院

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>

by十行的主页 by十行 | 初学一级 | 园豆:184
提问于:2021-04-14 14:18
< >
分享
最佳答案
0

jquery版本问题。
测试之后3.3.1以上版本(包括)会有这个问题,尝试用3.2.1后问题解决。

收获园豆:20
mowen285 | 菜鸟二级 |园豆:353 | 2021-04-14 16:41

你自己试一下

mowen285 | 园豆:353 (菜鸟二级) | 2021-04-14 16:41

@mowen285: 刚试了下3.2.0版本,有正常放大,谢谢

by十行 | 园豆:184 (初学一级) | 2021-04-16 09:28
其他回答(3)
0

结论只有一个。你的字体默认大小 > 3em
所以会先缩小,再放大

Ctrl` | 园豆:3246 (老鸟四级) | 2021-04-14 16:27

谷歌默认的字体是16px,16px是小于3em的吧

支持(0) 反对(0) by十行 | 园豆:184 (初学一级) | 2021-04-16 09:14
0

这是谷歌浏览器自己的问题,谷歌浏览器显示最小字号是 12 像素,小于 12 像素的字体在取值的时候也会得到 12 像素,而其它浏览器会得到正确的值,因此,在 jQuery 做动画取值计算的时候产生了误差

by.Genesis | 园豆:2605 (老鸟四级) | 2021-04-14 17:01

你是说它会从默认的16px变回12px然后在放大么?

支持(0) 反对(0) by十行 | 园豆:184 (初学一级) | 2021-04-16 09:17
0

可以先设置个初始字体大小再试试

魔露西 | 园豆:628 (小虾三级) | 2021-04-14 17:17
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册