jQuery

透明度をあやつる jQueryのコード

fadeto

各要素の透明度を、指定した値まで徐々に変化させる効果です。
半透明にしたい時ってけっこうあるもんですよ。
演出上使いどころはあると思います。

1
fadeTo(speed, opacity, [callback]);
  • 【speed】アニメーション効果のスピード指定
  • 指定は以下のようにざっくり設定できることができます。

    1. ”slow”
    2. ”normal”
    3. ”fast”

    ミリ秒でも指定が可能ですよ。

    • 1秒=1000
    • 2.5秒=2500

    スピードの指定を「0」にすると即時反映です。

  • 【opacity】透明度の指定
  • 以下のような感じですね。

    • 1=100% 完全に見える
    • 0.5=50% 半分見えてる
    • 0=0% 見えない
  • 【callback】効果が完了したあとに呼び出される関数を指定可能
  • これは省略できます。

例えば以下のような指定なら、bk2という要素がゆっくりとフェイドインしてくるってわけですね。

1
$(#bk2).fadeTo("slow", 1);
fadeTo(speed, opacity, [callback]) – jQuery 日本語リファレンス
こちらを参考にさせていただきました。

関連記事

  1. 20130824083407.jpg

    jQuery

    ChromeでjQueryの「ソースマップ」読み込みがエラーを起こしていた件

    Chromeでwebアプリのデバッグ中に以下のようなエラーがいきなり出…

  2. duration.jpg

    jQuery

    jQueryの「duration」ってホントは何秒なんだよ、をちょっと解決

    jQueryのアニメーションではdurationを設定できます。…

アーカイブ

  1. 日常

    英語の思考回路
  2. 日常

    ウィスキーでも
  3. design_tide_tokyo_2012-1.jpg

    イベント

    「DESIGN TIDE TOKYO 2012」でデザインのコンセプトを楽しんで…
  4. Milk_teeth_case-1.jpg

    日常

    抜歯のときにもらったケースがかわいらしい件。どうやら「乳歯ケース」というらしい
  5. 日常

    たまには、のんびり仕事
PAGE TOP