スポンサード リンク
jquery fadeIn()メソッド
fadeInメソッドは、セレクタで指定した要素をフェードインアニメーションで表示できるメソッドです
引数は二つあって1つ目がアニメーションスピードを数字で指定します。1秒が1000です。2秒が2000で全てを表示します
2つ目の引数でコールバック関数を指定できます。コールバック関数とはアニメーションが終わったら実行される処理です。連続して動きをつけることができます
第一引数の値には数字の他に"fast"、"normal"、"slow"などの文字列も指定できますfastが200、slowが600、省略した場合はnormalになります(400)
$("セレクタ").fadeIn();
引数を指定する場合
$("セレクタ").fadeIn(時間ミリ秒,コールバック関数);
コールバックを指定する例
$("セレクタ").fadeIn(1000,function(){ アニメーションが終わったあとに実行される処理 });
指定したHTML要素の表示をフェードインアニメーションで表示する
ボタンをクリックすると指定したdiv要素をフェードインしながら2秒で表示します
jquery
$(function() { $("button").click(function(){ $("div#hoge").fadeIn(2000); }); });css
#hoge{ background-color: #FFCC99; width: 250px; height: 250px; display: none; }
html
<div id="hoge"></div> <button>ボタン</button>
サンプル
引数を指定しない場合の表示
引数を指定しない場合は0.4秒で表示します。cssとHTMLは上と同じです
jquery
$(function() { $("button").click(function(){ $("div#hoge").fadeIn(); }); });