jquery slideToggleメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery slideToggle()メソッド

slideToggleメソッドは、セレクタで指定した要素をスライドアニメーションで表示/非表示するメソッドです
スライドアニメーションしながら要素の表示、非表示を切り替えるメソッドです
引数は二つあって1つ目がアニメーションスピードを数字で指定します。1秒が1000です。2秒が2000で全てを表示します
2つ目の引数でコールバック関数を指定できます。コールバック関数とはアニメーションが終わったら実行される処理です。連続して動きをつけることができます
第一引数の値には数字の他に"fast"、"slow"などの文字列も指定できますfastが200、slowが600

$("セレクタ").slideToggle();

引数を指定する場合

$("セレクタ").slideToggle(数字,コールバック関数);

コールバックを指定する例

$("セレクタ").slideToggle(1000,function(){
	アニメーションが終わったあとに実行される処理
});

指定したHTML要素の表示をアニメーションしながら表示を切り替える

ボタンをクリックすると指定した秒数でスライドしてdiv要素の表示、非表示が切り替わります
:not()は指定した条件以外を指定します。※css3セレクタで説明したセレクタです
:animatedはアニメーションしている要素を指定します。※独自セレクタで説明したセレクタです
:not(:animated)組み合わせて使うとアニメーションしていない場合にだけ処理を実行できるようになります。これがないとクリックした分だけ処理が発生して待たされることになります

jquery

$(function() {
	$("button#foo").click(function(){
	$("div#hoge:not(:animated)").slideToggle(1000);
	});
});
css
#hoge{
 background-color: #FFCC99;
 width: 250px; height: 250px;
 }

html

<div id="hoge"></div>
<button>ボタン</button>

サンプル


引数を指定しない場合の表示

引数を指定しない場合は0.4秒のアニメーションで表示を切り替えます。cssとHTMLは上と同じです

jquery

$(function() {
	$("button").click(function(){
	$("div#hoge:not(:animated)").slideToggle();
	});
});






(C)2012 ホームページ作成無料