アニメーション

jQuery API を使って作った、アニメーションに関するちょっと便利なサンプル集。

  • jQuery の animate の縦方向の出現や隠す動作

    jQuery の animate の縦方向の出現や隠す動作は、height に、show、hide、toggle などを指定することで可能。animate の1つ目の引数である properties 内の height: *** に指定する。

  • jQuery の animate の横方向の出現や隠す動作

    jQuery の animate の横方向の出現や隠す動作は、width に、show、hide、toggle などを指定することで可能。animate の1つ目の引数である properties 内の width: *** に指定する。

  • jQuery の animate の速度(動作時間)を指定する方法

    jQuery の animate の速度(動作時間)は、slow、normal、fast、ミリ秒単位の時間などで指定できる。animate の2つ目の引数で直接指定する方法と、animate の2つ目の引数である options 内の duration: ‘速度’; で指定する方法がある。

  • jQuery の animate の動作パターンを指定する方法

    jQuery の animate の動作パターンは、easing に linear と、swing などを指定するこで変更することができる。jQuery にデフォルトで用意されているのは、linear と swing のシンプルな動作パターン。

  • jQuery の animate で、透明⇔不透明のアニメーション動作

    jQuery の animate における、透明から不透明、もしくは、不透明から透明のアニメーション動作は、animate の1つ目の引数である properties 内の opacity に toggle、show、hide、0~1 の数字(0.5など)を指定することで可能。

  • jQuery の animate のアニメーション終了後に関数を実行

    jQuery の animate のアニメーション終了後の関数の実行は、animate の引数の complete に、アニメーション終了後に実行したい関数を指定することで可能。

  • jQuery の animate による連続アニメーション動作

    連続アニメーション動作は、jQuery の animate の4つ目の引数の complete で、次のアニメーション動作を指定するか、jQuery の animate の 2つ目の引数である options 内の complete に、次のアニメーション動作を指定することで可能。

  • jQuery の animate による同時多発アニメーション

    同時多発アニメーションは、jQuery の animate( properties, options ) メソッドの2つ目の引数のoptions(オプション)内で、 queue(キュー) に false を指定することで可能。 queue に false を指定すると、複数のアニメーションを、同時に実行する。 queue に true を指定すると、複数のアニメーションを、順番に実行する。

  • jQuery の animate で、アニメーションのステップごとに関数を実行

    アニメーションの各ステップの後に関数を実行するには、jQuery の animate( properties, options ) メソッドの2つ目の引数のoptions(オプション)内で、 step (ステップ)に、実行したい関数を指定することで可能。

  • jQuery の fadeTo( duration, opacity ) で、点滅アニメーション

    特定の要素を点滅させるアニメーションのサンプル。jQuery API の fadeTo( duration, opacity ) メソッドを使うと簡単だ。

  • jQueryによる喜びの絵文字「♪ワーイo(^∇^)oワーイ♪」アニメーション

    jQuery による、喜びの絵文字「♪ワーイo(^∇^)oワーイ♪」のアニメーション。「実行」ボタンをクリックすると、「♪ワーイo(^∇^)oワーイ♪」の絵文字を、点滅させながら変化させる。アニメーション中は、「実行」ボタンを無効にし、クリックできないようになる。

  • jQueryによる走る絵文字「ε=ヽ(* ̄∇ ̄)ノ」アニメーション

    jQuery による、走る絵文字「ε=ヽ(* ̄∇ ̄)ノ」のアニメーション。「スタート!!」ボタンをクリックすると、「ヽ(  ̄∇ ̄)ノ」の絵文字の左横に、0.5秒ごとに、「ε=」を追加していく。「ε=」が11個現れたら、アニメーションを終了する。アニメーション中は、「スタート!!」ボタンを無効にし、クリックできないようになる。アニメーションが終了すると、「スタート!!」ボタンのテキストを「位置について」に変更する。 「位置について」ボタンをクリックすると、絵文字を「ヽ(  ̄∇ ̄)ノ」に戻し、ボタンのテキストを「スタート!!」に戻す。

  • jQueryを使い、スクロールボックスの高さをアニメーションで変更

    jQueryを使い、スクロールボックスの高さをアニメーションで拡大縮小し、隠れているテキストを表示させたり戻したりする方法。

  • jQueryを使い、マウスオーバーで画像を入れ替え及び拡大

    jQueryを使い、複数画像のマウスオーバーイベント時に画像を入れ替え、アニメーションで拡大する。マウスアウトイベント時には元の画像に戻し、元の大きさにアニメーションで縮小させる。画像にリンクを貼れば、メニューなどに応用できるだろう。

スポンサード リンク