如何在 jQuery 中使用 css font-weight 属性为文本设置动画？正常到粗体

Posted 2023-03-06

【中文标题】如何在 jQuery 中使用 css font-weight 属性为文本设置动画？正常到粗体

【英文标题】：How to animate text with css font-weight property in jQuery ? normal to bold

【发布时间】：2012-09-08 03:46:37

【问题描述】：

我正在尝试像不透明效果这样的动画，它会慢慢地将文本变粗。尝试了通常的animate() 方法，但没有奏效。搜索它，但找不到任何示例。 可以这样做吗？

jsFiddle.

jQuery：

var Text = $('h1');
Text.click(function() 
    Text.animate('font-weight':'bold',600)
        .delay(200).animate('font-weight':'normal',600);
);

【问题讨论】：

尝试探索 CSS3 过渡？

@Roko nope /: i've manage to do with text-shadow，但我相信这样会更好。

【参考方案1】：

从技术上讲，字体粗细可以是一个数字，例如 100 或 800，但是 实际上，浏览器只实现普通或粗体。 Animate 采用数字或“隐藏”、“显示”或“切换”之一。 所以你的“大胆”是行不通的。 理论上，您可以将字体粗细设置为一个数字，然后传入一个 要动画的数字。 （400 是“正常”重量，700 是粗体 [1]） 唉，这似乎在 jQuery 中不起作用。

但是！你可以用 CSS3 做到这一点，虽然它不能在 Internet Explorer 上工作，但你想要的效果将达到 50% 以上的人口。请参阅此示例。

http://www.quackit.com/css/css3/properties/css_transition-property.cfm

【讨论】：

这不起作用，如果你将悬停属性更改为 .resize:hover font-weight:bold; 你会看到它没有动画，它只是在粗体和普通之间切换。

奇怪的是它看起来好像是粗体的动画，我没有测试它我把测试留给你，抱歉这个选项不起作用！

谢谢，虽然有人指出这不是动画，但它已经达到了我需要的目的，所以感谢@Shannon。

【参考方案2】：

编辑，2021 年 4 月：现在可以使用 transition: font-weight 或更无缝地使用 variable fonts 来实现。

很遗憾，我认为这是不可能的。

字体中的每个字符都有特定的形状。此外，不同权重中的相似字符也有区别——粗体字符不只是与常规对应物具有数学定义的偏移量。

使用 jQuery.css() 可以很容易地从常规跳转到 bold 或 italic，但是目前无法使用 jQuery.animate()浏览器中字体粗细的转换。在动画中也很难做到，因为不同权重之间没有“帧”，因为它们都是单独绘制的。

然而，

如果您为不同的粗细选择具有一致字母间距的字体（例如Exo）并制作从细到黑的阶梯动画，您可能会接近所需的结果。

从你的 jsFiddle 开始，这就是我能想到的：

Here is working jsFiddle.

以及它背后相当愚蠢的 javascript：

Text.click(function() 
            
  Text.css('font-weight':200);
  setTimeout(function() Text.css('font-weight':300), 30)
  setTimeout(function() Text.css('font-weight':400), 60)
  setTimeout(function() Text.css('font-weight':500), 90)
  setTimeout(function() Text.css('font-weight':600),120)
  setTimeout(function() Text.css('font-weight':700),150)
  setTimeout(function() Text.css('font-weight':800),180)
  setTimeout(function() Text.css('font-weight':900),210)

);

【讨论】：

谢谢！我已经在 SO 上寻找答案很长时间了，我认为是时候尝试用我知道的几件事来帮助人们了。至于我的回答，主要缺点是您需要一种具有很多权重的字体，这在免费字体中很难找到。此外，由于我的声誉为 1，我可以发布的链接数量非常有限 :)

我认为现在有可能......与transition: font-weight codepen.io/madshensel/pen/ZOYwpy

【参考方案3】：

您可以使用纯 CSS，使用 text-shadow 和伪类 :hover，并使用 transition 对其进行动画处理

.animate 
  font-size: 35px;
  transition: 0.6s;

.animate:hover 
  text-shadow: 0 0 2px black;
  transition: 0.6s;

<div class="animate">***</div>

---

你也可以使用 jQuery，通过 addClass():

$("#animateBold").click(function() 
  $(".animate").addClass("bold");
);

.animate 
  font-size: 30px;

/* Then .bold CSS class */
.bold 
  text-shadow: 0 0 2px black;
  transition: 0.6s;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">***<div>
<button id="animateBold">Animate!</button>

---

或者，如果您想要切换效果，请使用 ternary 运算符：

($(".animate").hasClass("bold")) ? $(".animate").removeClass("bold") : $(".animate").addClass("bold");

$("#toggleBold").click(function() 
  ($(".animate").hasClass("bold")) ? $(".animate").removeClass("bold") : $(".animate").addClass("bold");
);

.animate 
  font-size: 30px;
  transition: 0.6s;

.bold 
  text-shadow: 0 0 2px black, 0 0 2px black;
  transition: 0.6s;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">***<div>
<button id="toggleBold">Animate!</button>

【讨论】：

我认为这是一个很酷的效果，可以在执行操作后使用，我添加了第二类来淡出效果。