JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

jQuery で要素をフェードインさせる方法

f:id:vw-dsg:20200601063533p:plain

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