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. duration.jpg

    jQuery

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

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

  2. 20130824083407.jpg

    jQuery

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

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

最近の記事

  1. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  2. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  3. コミックのイラストが新鮮だった!『MARVEL展』
  4. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  5. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 20130923111815.jpg

    iOS

    Xcode5の「A valid provisioning profile for…
  2. じつは線香花火を作るのって難しい! 無印良品主催の線香花火手作りワークショップが熱い!

    イベント

    じつは線香花火を作るのって難しい! 無印良品主催の線香花火手作りワークショップが…
  3. 日常

    充電中・・・
  4. image_duplicate_as_jpeg.jpg

    Mac

    Macでアプリを使わずpngを一気にjpgに変換する方法
  5. タグクラウド

    WordPress

    タグクラウド追加。
PAGE TOP