SONICMOOV Googleページ

【jQuery入門 9】様々なアニメーションをつけよう。

【jQuery入門 9】様々なアニメーションをつけよう。

  • このエントリーをはてなブックマークに追加

今回はjQuery入門シリーズの9回目でございます!
前回の記事はこちら(´。‐ω‐`)

【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。

jQuery を使えば、ほんの少しの記述で簡単にアニメーションを実装できちゃいます!
そんな魔法みたいな機能が jQuery にはあらかじめ用意されているのですっ!
なんてステキ…(*´Д`)!!!

目次

要素を表示・非表示させるアニメーション

要素の透明度を操作して、表示・非表示させるアニメーション効果を与える関数です。

.fadeIn()

非表示な要素をフェードイン表示させます。

DEMO

$('.hoge').fadeIn( [duration ] [, complete ] );
  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • complete … 再生終了後に実行する処理(関数)

その他、お好みでオプションを指定することができます!

オプション

.fadeOut()

表示している要素をフェードアウト表示させます。

DEMO

$('.hoge').fadeOut( [duration ] [, complete ] );
  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • complete … 再生終了後に実行する処理(関数)

その他、お好みでオプションを指定することができます!

オプション

要素を開閉させるアニメーション

各要素の高さを操作して、上から下にスライドして降りて来るイメージの効果で表示させる関数です。

.slideDown()

要素を開いた状態にします。

DEMO

$('.hoge').slideDown( [duration ] [, complete ] );
  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • complete … 再生終了後に実行する処理(関数)

その他、お好みでオプションを指定することができます!

オプション

.slideUp()

要素を閉じた状態にします。

DEMO

$('.hoge').slideUp( [duration ] [, complete ] );
  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • complete … 再生終了後に実行する処理(関数)

その他、お好みでオプションを指定することができます!

オプション

要素に独自のアニメーションをつける

.animate()

CSS のプロパティを使って、独自のアニメーション効果を作成するための関数です。

DEMO

.animate( properties [, duration ] [, easing ] [, complete ] )
  • properties … CSS のプロパティ(オブジェクト)
  • duration … 再生時間 (数値 or 文字列) デフォルトは 400
  • easing … イージングの種類 (文字列) デフォルトは ‘swing’
  • complete … 再生終了後に実行する処理(関数)

ここで注意したいのが、プロパティ名はキャメルケースで表記されなければなりません。
例えば border-width は、borderWidth のように記述します。

例)

$('.hoge').animate({
    opacity: 1.0,
    width: '200px',
    height: '200px',
    left: '0px',
    borderWidth: '10px'
});

その他、お好みでオプションを指定することができます!

オプション

次回はいよいよ、jQuery入門シリーズの10回目(最終回)!
jQuery プラグインの簡単な設置方法をご紹介します!

第10回目はこちら。
【jQuery入門 10】プラグインを使ってみよう。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

うさこ(マークアップエンジニア)

ソリューション事業部マークアップエンジニアのうさこです。入社して4年目となりました!ラーメンが大好きなのですが、脂肪という名の悪魔を極力避けるために我慢の日々を過ごしています… ぐぐぐ…

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation