スポンサード リンク
jquery hide()メソッド
hideメソッドは、セレクタで指定した要素の非表示をアニメーションできるメソッドです
できること
表示している要素を非表示できる
引数は二つあって1つ目がアニメーションスピードを数字で指定します。1秒が1000です。2秒が2000で全てを表示します
2つ目の引数でコールバック関数を指定できます。コールバック関数とはアニメーションが終わったら実行される処理です。連続して動きをつけることができます
$("セレクタ").hide();
引数を指定する場合
$("セレクタ").hide(時間ミリ秒,コールバック関数);
コールバックを指定する例
$("セレクタ").hide(1000,function(){ 非表示するアニメーションが終わったあとに実行される処理 });
指定したHTML要素の表示をアニメーションしながら表示する
ボタンをクリックすると指定した秒数でdiv要素が非表示になったあとに、コールバック関数を呼び出して、連続で処理を実行します。今回はshow()メソッドで表示にする処理を入れました
jquery
$(function() { $("button").click(function(){ $("div#hoge").hide(1000,function(){ $(this).show(2000) }); }); });css
#hoge{ background-color: #FFCC99; width: 250px; height: 250px; }
html
<div id="hoge"></div> <button>ボタン</button>
サンプル
クリックするとゆっくり縮小しながら非表示にします。処理が終わったらコールバック関数でゆっくりと表示します
引数を指定しない場合の表示
引数を指定しない場合はアニメーションなしで表示を消します。cssとHTMLは上と同じです
jquery
$(function() { $("button").click(function(){ $("div#hoge").hide(); }); });