Geek asks and answers

How to animate text using font-weight css property in jQuery? normal to bold

I am trying to create an animation as an opacity effect that slowly transforms the text. I tried the usual animate()method, but did not work. I looked for him, but did not 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);
});
+5
source share
4 answers

Unfortunately, I think this is not possible.

Each font character has a specific shape. In addition, similar symbols in different weights are also different - a bold symbol does not just have a mathematically defined offset from its usual counterpart.

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)

});
+12

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>
+3

- , , 100 800, , . , "", "" "". "" . , . (400 - "" , 700 - [1]) , jQuery.

! CSS3, Internet Explorer, 50% . . .

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

-2

You cannot animate font-weight, but you can animate a text shadow with a blur set to 0. This will give you some animated text. Perhaps this library can help you.

http://www.alexpeattie.com/projects/animate-textshadow/

-3
source

More articles:


All Articles