Как анимировать текст с помощью свойства CSS font-weight в jQuery? нормальные смелые

Я пытаюсь анимацию, как эффект непрозрачности, который медленно делает текст смелее. Пробовал обычный animate() метод, но не работает. Искали его, но coundn не находим ни одного примера. возможно ли это сделать?

jsFiddle.

jQuery:

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

4 ответов

к сожалению, я думаю, что это невозможно.

каждый символ шрифта имеет определенную форму. Кроме того, сходные символы в разных весах веса также различны-жирный символ не просто имеет математически определенное смещение от своего обычного аналога.

было бы очень легко перейти от обычного к полужирный или курсив С помощью jQuery.css (), но там в настоящее время невозможно jQuery.анимировать() на переход шрифта в браузере. Это трудно сделать и в анимации, потому что между разными весами нет" кадров", так как все они рисуются отдельно.

однако,

если вы выбираете шрифт, который имеет последовательное расстояние между буквами для разных весов-например,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)

});
13

вы можете использовать чистый 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, но практически говоря, браузеры реализуют только обычный или жирный шрифт. Animate принимает либо номер, либо один из "Скрыть", "показать" или "переключить". Так что твое "смелое" не сработает. Теоретически вы можете установить вес шрифта на число, а затем передать номер для анимации. (400 - "нормальный" вес, 700-жирный [1]) Увы, это не работает в jQuery.

но! Вы можете сделать это с помощью CSS3, хотя он не будет работать в Internet explorer, ваш желаемый эффект достигнет более 50% населения. См. это для примера.

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

-2

вы не можете анимировать вес шрифта, но вы можете анимировать текстовую тень с размытием, установленным в 0. Это даст вам своего рода анимированный текст. Может, эта библиотека тебе поможет.

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

-3