8

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

js小提琴。

jQuery：

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

3 回答 3

16

编辑，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)

});
于 2013-06-09T20:49:13.427 回答
4

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

.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>

于 2015-07-08T08:23:51.090 回答
-2

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

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

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

于 2012-09-15T03:05:39.233 回答