问题

I am trying to animation like opacity effect, which turns text bolder slowly. Tried usual animate() method but didn't work. Searched for it but coundn't find any example. Is it possible to do this?

jsFiddle.

jQuery:

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

回答1:

Sadly I think this is impossible.

Each character in a font has a specific shape. In addition, similar characters in different weights weights are also distinct—a bold character does not simply have a mathematically-defined offset from its regular counterpart.

It would be very easy to jump from regular to bold or italic with jQuery.css(), but there it is currently impossible to jQuery.animate() the transition of font-weight in the browser. It is hard to do in animation as well because there are no “frames” between the different weights, as they are all drawn separately.

However,

If you choose a font that has a consistant spacing of letters for the different weights—such as Exo—and do a stepped animation from thin to black you might come close to the desired result.

Starting from your jsFiddle that is what I could come up with:

Here is working jsFiddle.

And the rather dumb Javascript behind it:

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)

});

回答2:

You could use pure CSS, using text-shadow and the pseudo class :hover, with a transition to animate it

.animate {
  font-size: 35px;
  transition: 0.6s;
}
.animate:hover {
  text-shadow: 0 0 2px black;
  transition: 0.6s;
}

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

Also you could use jQuery, by using 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>

Or, if you wanted a toggle effect, using a ternary operator:

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

回答3:

Technically font-weight can be a number, like 100 or 800, but practically speaking browsers only implement either normal or bold. Animate takes either a number or one of "hide", "show", or "toggle". So your "bold" won't work. In theory you could set the font-weight to a number then pass in a number to animate. (400 is "normal" weight, 700 is bold [1]) Alas this doesn't seem to work in jQuery.

BUT! You CAN do this with CSS3, although it wont work on Internet explorer, your desired effect will reach more than 50% of the population. See this for an example.

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

来源：https://stackoverflow.com/questions/12433645/how-to-animate-text-with-css-font-weight-property-in-jquery-normal-to-bold

标签

jquery