2011年07月11日

jQueryで色をアニメーション

今回は色のアニメーションについてです。


jQueryにはanimationという関数があります。
で、アニメーションできるのは不透明度(opacity)や座標(left、top)など、数値で表せるものだけなんですね。
色は「#ff0000」のように表します。
「これだって16進の数値だろうが!」と思いますが、不服にもアニメーションできません。


そんなときは、怒って壁を殴る前にjQueryUIをロードしてください。
あとはいつものanimation()と同じように書けます。

以下の例では、spanの文字色が赤に変化していきます。
jQueryUIをロードしないと以下のコードは動きません。

色をアニメーション
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
//jQueryUIをロード
google.load("jqueryui", "1");
</script>
<script>
$(function() {
$("span").animate({
color: "#ff0000"
});
});
</script>
ラベル:jquery jQueryUI
posted by ぺるたご at 00:53| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。