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

Question

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

jsFiddle.

jQuery：

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

Answer 1

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

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

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

Answer 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)

});

Answer 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">StackOverflow</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">StackOverflow<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">StackOverflow<div>
<button id="toggleBold">Animate!</button>