jQuery字体大小增加Chrome浏览器

jQuery fontSize increase on Chrome

本文关键字：Chrome 浏览器 增加 字体 jQuery      更新时间：2023-09-26

这段代码:

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

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

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

基本HTML: 

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

和基本脚本:

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

没有默认的字体大小，重复您的问题:

DEMO - Issue replicated

使用默认的字体大小，类似于下面的修复问题:

body{
    font-size: 20px;
}

DEMO -使用默认字体大小

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

一个简单的解决方法是将字体大小定义为一个变量并手动增加它，然后在动画

期间使用该变量作为参数
Var fontsize = $(div).css('font-size') * 1.2;
$(div).stop().animate({ 
    fontSize: fontsize,
}, {
    duration: duration2,
    easing: "easeOutBack"
});

我想这可能是你的CSS:这个小提琴使用你的代码，在我的Chrome中工作得很好…

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