logo标签列表

如何使用jQuery中的css font-weight属性来实现文本动画？从normal到bold。

jquerycssanimationfontsjquery-animate
9

我想实现一个类似于不透明度的动画效果，使文本逐渐变粗。尝试使用常规的animate()方法，但未能成功。搜索了一下，但找不到任何示例。这个有可能做到吗？

jsFiddle.

jQuery：

var Text = $('h1');
Text.click(function() {
    Text.animate({'font-weight':'bold'},600)
        .delay(200).animate({'font-weight':'normal'},600);
});
1
你尝试过探索CSS3过渡效果吗？ - Roko C. Buljan
1
@Roko 不行 /: 我已经用text-shadow实现了，但我相信这种方法会更好。 - Barlas Apaydin
4个回答
17

2021年4月更新：现在可以使用transition: font-weight或更流畅的可变字体来实现此目标。

可惜，我认为这是不可能的。

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

使用 jQuery.css() 轻松地从常规修改到加粗或斜体，但目前在浏览器中无法通过 jQuery.animate() 进行字体粗细的过渡。动画效果也很难实现，因为不同重量之间没有“帧”可用于插值处理，它们是分别绘制的。

然而，

如果您选择具有不同字重之间一致字母间距的字体（例如Exo），并从细到黑逐步进行动画，您可能会接近所需的结果。

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

这里是工作的 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)

});
1
谢谢！我已经在Stack Overflow上看了很久的答案，觉得是时候尝试帮助一些我所知道的东西了。至于我的回答，主要的缺点是你需要一个有很多字重的字体，这在免费字体中很难找到。另外，由于我的声誉只有1分，我在发布链接方面非常受限制。 - MXDVL
我认为现在是可能的...使用 transition: font-weight。 - empiguet
4
你可以使用纯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>

或者，如果你想要一个切换效果，可以使用 三元运算符：

($(".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>

1
我认为这是一个很酷的效果，在执行操作后使用，我添加了第二个类来淡出效果。 - drooh
2
1
虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。- 来自审查 - Paul T.
-3

从技术上讲，font-weight可以是数字，如100或800，但实际上浏览器只实现了普通或粗体。 Animate接受数字或“hide”、“show”或“toggle”之一。 所以你的“bold”不起作用。 理论上，您可以将font-weight设置为数字，然后传递一个数字来进行动画处理。（400是“normal” weight，700是bold [1]） 可惜在jQuery中似乎无法实现。

但是！您可以使用CSS3来实现此效果，尽管它不能在Internet Explorer上工作，但您的期望效果将覆盖50％以上的人口。请参见此示例。

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

2
如果你把悬停属性改成.resize:hover { font-weight:bold; }，你会发现它不是动画效果，只是在粗体和普通字体之间切换。这样是行不通的。 - jeroen
很奇怪，它看起来好像被设置为加粗动画了，我没有测试过，我把测试留给你了，很抱歉这个选项不起作用！ - Shannon
谢谢，尽管有人指出这不是动画的，但它对我需要的目的起到了作用，所以感谢@Shannon。 - bawpie
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接