このページの本文へ

40分で覚える!jQuery速習講座 (5/6)

2010年02月16日 11時00分更新

文●西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

【20分目:基礎編】
jQueryでアニメーション効果を付ける

 jQueryを使うと、要素の表示/非表示に、アニメーション効果を付けられます。アニメーション効果には次のような命令があります。

コード
コード
コード

 「スピード」のところにはslow/normal/fastのいずれか、またはミリ秒(1秒=1000秒)単位で数字を指定できます。たとえば次のサンプルでは、button要素がクリックされると、CSSで非表示(display:none;)に設定されている赤色のdiv要素が、少しずつ拡大しながら表示されます。

サンプル4(スクリプト部分)


$("button").click(function(){
    $("div").show("slow");
});

サンプル4(CSS部分)


div{
    width:200px;
    height:200px;
    background:red;
    display:none;
}

サンプル4(HTML部分)


<button>表示</button>
<div></div>


サンプル4の実行画面ボタンがクリックされると画像が拡大しながら表示される(画像クリックでサンプルページを表示します) サンプル4の実行画面ボタンがクリックされると画像が拡大しながら表示される(画像クリックでサンプルページを表示します))
サンプル4の実行画面ボタンがクリックされると画像が拡大しながら表示される(画像クリックでサンプルページを表示します) サンプル4の実行画面ボタンがクリックされると画像が拡大しながら表示される(画像クリックでサンプルページを表示します))
サンプル4の実行画面ボタンがクリックされると画像が拡大しながら表示される(画像クリックでサンプルページを表示します)


■Amazon.co.jpで購入

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く