8

テキストをゆっくりと太字にする不透明効果のようなアニメーションを作成しようとしています。通常のanimate()方法を試しましたが、機能しませんでした。それを検索しましたが、例が見つかりませんでした。これを行うことは可能ですか？

jsFiddle。

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

text-shadowと疑似クラスを使用して純粋なCSSを使用し、それをアニメーション化することが: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>

于 2015-07-08T08:23:51.090 に答える
-2

技術的には、フォントの太さは100や800などの数値にすることができますが、実際には、ブラウザは通常または太字のいずれかのみを実装します。Animateは、「非表示」、「表示」、または「トグル」のいずれか1つを取ります。したがって、「太字」は機能しません。理論的には、フォントの太さを数値に設定してから、数値を渡してアニメーション化することができます。（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 に答える