jQuery fontSize 在 Chrome 上增加

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"
});