jQuery で要素をフェードインさせる方法
jQueryで要素をフェードインさせる
jQuery で要素をフェードインさせるには「fadeIn()」に時間、または、既定値(slow=ゆっくり、normal=ふつう、fast=速い)を設定して使用します。
要素.fadeIn(時間);
時間:ミリ秒,"slow","normal","fast"
例)$("#test").fadeIn(5000); // 5000msでフェードイン
jQuery + JavaScript ソース
「fadein_btn」というIDが付いたボタン要素をクリックすると「test_hako」というIDが付いた要素が5秒でフェードインします。
<script type="text/javascript">
$(function(){
$("#test_hako").hide(); // 要素を一旦隠す
$("#fadein_btn").click(function(){
$("#test_hako").fadeIn(5000); // フェードイン
});
});
</script>
HTML
HTMLは「input」要素と「div」要素で構成されています。
<p><input id="fadein_btn" type="button" value="BUTTON" /></p>
<div id="test_hako">箱</div>
CSS
CSSではフェードインする「test_hako」要素のスタイルを設定しています。
#test_hako {
background-color: #9C3;
width: 100px;
height: 100px;
position: relative;
color: #FFF;
text-align: center;
diplay: table-cell;
virtical-align: middle;
}
サンプルの実行
ボタン「BUTTON」を押すと黄緑色のボックスが5秒かけてフェードインします。
END