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. jQuery

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

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

  2. jQuery

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

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

最近の記事

  1. 進撃の巨人展FINAL チラシ
  2. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  3. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  4. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  5. 【コレクション】カードダス:SDガンダム外伝シリーズ
  6. 懐かしい!!カードダスSD戦国伝!!
  7. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!

アーカイブ

  1. 日常

    『レイアウトのデザインを読む』
  2. LEGOはやぶさ

    レゴはやぶさ「プロダクト」について思ったこと
  3. 平成何年だっけ?ってなる人にオススメ! iPhoneアプリ「和暦.jp」でもう迷わない!

    iPhoneApp

    平成何年だっけ?ってなる人にオススメ! iPhoneアプリ「和暦.jp」でもう迷…
  4. 読書

    【絵本】マンガっぽい絵本『ぼくはイスです』
  5. 安価で長いHDMIケーブルならコレ! 「Amazonベーシック ハイスピードHDMIケーブル」

    プロダクト

    安価で長いHDMIケーブルならコレ! 「Amazonベーシック ハイスピードHD…
PAGE TOP