fade(フェード) 効果

アニメション効果については３個の講座で実行します。

アニメション効果は fadeIn(),fadeOut(),slideUp(),slideDown(), animate() です。

この講座ではfadeについて説明します。

fadeIn(),fadeOut()

fadeOutは 徐々に消えて、fadeInは　徐々に現れる効果です。

したのshow click!!とhide click!!をクリックしてください。

show click!! hide click!!

上のような効果がfadeです。

では上のようにshow clilck!!ボタンと hide click!!ボタンを利用してfade効果を作ってみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    var ex_show = $('.ex_show');
    var ex_hide = $('.ex_hide');
    var ex_box = $('.ex_box');

    ex_show.click(function(){
        ex_box.fadeIn();
    });

    ex_hide.click(function(){
        ex_box.fadeOut();
    });
});
</script>
<style type="text/css">
    .ex_show{float:left;margin-right:20px;cursor:pointer}
    .ex_hide{float:left;cursor:pointer}
    .ex_box{clear:both; float:left; width:100px; height:50px; background-color:yellow; border:1px solid skyblue; margin:50px; border-radius:10px}</style>
</head>
<body>
    <b class="ex_show">show click!!</b>
    <b class="ex_hide">hide click!!</b>
    <div class="ex_box"></div>
</body>
</html>

スピード　制御

消える時間、現れる時間を制御することも出来ます。

fadeIn(1000), fadeOut(500), fadeIn('slow'), fadeOut('fast')

括弧の中に数字を入れてスピードの制御が出来ます。 1000は 1秒の意味です。

では0.5秒はどうするんでしょうか、　1000が 一秒なので 半分な0.5は　500です。

文字列もいれることができます。

fastとslowを使えます。fastは 200で、 slowは 400の意味です。

徐々に現れて、早めに消える効果ももちろんできます。
show click!! hide click!!

上のようにももちろんできます。

ではしたのソースでやってみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>coreasur - jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(function(){
    var ex_show_3000 = $('.ex_show_3000');
    var ex_hide_fast = $('.ex_hide_fast');
    var ex_box_3f = $('.ex_box_3f');

    ex_show_3000.click(function(){
        ex_box_3f.fadeIn(3000);
    });

    ex_hide_fast.click(function(){
        ex_box_3f.fadeOut('fast');
    });
});
</script>
<style type="text/css">
.ex_show_3000{float:left;margin-right:20px;cursor:pointer}
.ex_hide_fast{float:left;cursor:pointer}
.ex_box_3f{clear:both; float:left; width:100px; height:50px; background-color:yellow; border:1px solid skyblue; margin:50px;border-radius:10px}
</style>
</head>
<body>
    <b class="ex_show_3000">show click!!</b>
    <b class="ex_hide_fast">hide click!!</b>
    <div class="ex_box_3f"></div>
</body>
</html>

こうfadeについて調べました、次はslideUp()とslideDown()です。