ウェブ学のすすめ

Study of Web Design & Programing

jQueryでノーマルアニメーション

プレビュー


スマートフォンの方はこちらからプレビューできます。
jQueryでノーマルアニメーション - js do it

コード

HTML
<button>表示</button>
<div></div>
JavaScript
$(function(){
    $('button').click(function(){
	if($('div').css('display') == 'none'){
	    $('div').show('slow');
	    $('button').html('閉じる');
	}
	else{
	    $('div').hide('slow');
	    $('button').html('表示');
	}
    });
});

ポイント

  • show():表示する
  • hide():非表示にする
  • スピードはslow/normal/fast、あるいはミリ秒(1秒=1000秒)で指定

※注意

  • html():任意の要素の内容を取得するために使用する
  • html('HTMLの文字列'):指定した要素に任意のコンテンツを設定するために使う