3

这段代码：

$(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/

4

3 回答 3

3

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

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

基本 HTML：

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

和基本脚本：

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

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

演示- 已复制问题

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

body{
    font-size: 20px;
}

演示- 使用默认字体大小

于 2013-03-16T22:57:03.460 回答
0

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

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

Var fontsize = $(div).css('font-size') * 1.2;
$(div).stop().animate({ 
    fontSize: fontsize,
}, {
    duration: duration2,
    easing: "easeOutBack"
});
于 2013-03-16T22:42:10.397 回答
0

我想这可能是你的 CSS：这个小提琴使用你的代码并且在我的 Chrome 中运行良好......

$('#the').animate({ 
    fontSize: "+=20%",
}, {
    duration: 2000,
    easing: "easeOutBack"
});
于 2013-03-16T22:49:04.117 回答