Question

这段代码：

$(div).stop().animate({ 
    fontSize: "+=20%",
}, {
    duration: duration2,
    easing: "easeOutBack"
});

应该将字体大小增加20％，并且它会在除Chrome以外的所有浏览器上增加，因为某些原因减少字体大小。

具体而言，我正在使用的页面是：http://dl.dropbox.com/u/67774614/letters/letters.html。键入字母以删除它们，然后字母应增加字体大小以及鼠标悬停时跳跃和变红。在Chrome上，他们应该（错误地）减小字体大小。

问题出现在此脚本的第82-90行：http://tny.cz/49bc46f7

这是建议的小提琴：http://jsfiddle.net/cZEzy/1/

Answer 1

您应该设置初始字体大小。查看代码时，letter.css没有指定默认的字体大小。

使用Alex Milewski的答案中的代码并对其进行扩展。

基本HTML：

<div id="org">Stuff1</div>
<div id="the">Stuff2</div>

基本脚本：

$('#the').animate({ 
    fontSize: "+=20%",
}, {
    duration: 2000,
    easing: "easeOutBack"
});

无默认字体大小，复制您的问题：

DEMO - 问题已复制

使用默认字体大小，类似于以下内容解决了问题：

body{
    font-size: 20px;
}

DEMO - 使用默认字体大小

Answer 2

不太清楚为什么Chrome会发生这种情况。

一个简单的解决方法是将字体大小定义为变量并手动递增，然后在动画期间使用变量作为参数

Var fontsize = $(div).css('font-size') * 1.2;
$(div).stop().animate({ 
    fontSize: fontsize,
}, {
    duration: duration2,
    easing: "easeOutBack"
});

Answer 3

我认为这可能是你的CSS：fiddle使用你的代码并在我的Chrome中运行良好...

$('#the').animate({ 
    fontSize: "+=20%",
}, {
    duration: 2000,
    easing: "easeOutBack"
});

Chrome上的jQuery fontSize增加

3 个答案: