这段代码:
$(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/
答案 0 :(得分:3)
您应该设置初始字体大小。查看代码时,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 - 使用默认字体大小
答案 1 :(得分:0)
不太清楚为什么Chrome会发生这种情况。
一个简单的解决方法是将字体大小定义为变量并手动递增, 然后在动画期间使用变量作为参数
Var fontsize = $(div).css('font-size') * 1.2;
$(div).stop().animate({
fontSize: fontsize,
}, {
duration: duration2,
easing: "easeOutBack"
});
答案 2 :(得分:0)
我认为这可能是你的CSS:fiddle使用你的代码并在我的Chrome中运行良好...
$('#the').animate({
fontSize: "+=20%",
}, {
duration: 2000,
easing: "easeOutBack"
});