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. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  3. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  4. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  5. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  6. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  7. コミックのイラストが新鮮だった!『MARVEL展』
  8. シンプルで使い易い!!「雷に強い マイクロタップ 4個口」
  9. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  10. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 日常

    葉巻ゲット
  2. しんかい6500

    LEGO

    【LEGOSTREAM】しんかい6500の本体ビルド
  3. パニック - Coda 2

    MacApp

    【Coda2】Coda2を発売日に買ってました
  4. 日常

    連休モード終了
  5. 日常

    出張デザイン
PAGE TOP