アニメーション

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