jQuery在Chrome浏览器上增加字体大小

Question

jQuery在Chrome浏览器上增加字体大小

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 这里有一个建议的fiddle链接：http://jsfiddle.net/cZEzy/1/

- JamieGL

1

你能发布相关的HTML/CSS吗？如果你能创建一个带有默认CSS值和相关HTML/script的fiddle（http://jsFiddle.net），那就更好了，因为一旦你发布的链接失效，问题就变得不太有意义了。 - Nope

1

快速查看链接网站，您的letter.css中没有设置初始字体大小值。在脚本中添加一些console.log()语句以查看Chrome认为的默认字体大小。尝试设置默认字体大小，例如1em/16px。这样，Chrome就知道从哪里增加字体大小到+=20%。 - Nope

感谢您对动画的建议和好评，它们都很有帮助。 - JamieGL

3个回答

0

不太确定为什么在Chrome中会出现这种情况。

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

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

- Bill

0

我想可能是你的CSS的问题：这个fiddle使用了你的代码，在我的Chrome浏览器中运行得很好...

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

- Alex Milewski

1

-1 是因为 OP 使用的是 jQuery 1.7 和 jquery-ui 1.10，一旦切换到这些库，问题在 Chrome 中就会持续存在。请参见 fiddle，其中使用了 OP 的 jQuery 和 jQuery UI，展示了这个问题。 - Nope

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nope · Accepted Answer

您需要设置一个初始的字体大小。查看您的代码，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;
}

演示 - 使用默认字体大小