EVERDEVEL

スライド(slide) 効果

slideUp(),slideDown()

slideUp()はタグが縦の長さが上向きにいきながらどんどん短くなって消えます。

slideDown()はタグの縦の長さが下向きにいきながらどんどん長くなって現れます。

これが何かを見てみましょう。show click、hide clickを押しながら確認してください。

show click!! hide click!!

上のように消えて、現れるのがslideですね。

では、やってみましょう。

show click, hide click　ボタンを作ってshow clickを押したらslideDown(), hide clickを押したらslideUp()が作動するソースです。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel - 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.slideDown();
    });

    ex_hide.click(function(){
        ex_box.slideUp();
    });
});
</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; 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>

スピード制御

前の講座と同じ方法でします。

slideUp(1000), slideDown(500), slideUp('slow'), slideDown('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>everdevel - 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.slideDown(3000);
    });

    ex_hide_fast.click(function(){
        ex_box_3f.slideUp('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; 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>

こうslideについて調べました

ありがとうございました。

次のコンテンツは
アニメション効果

ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。

新しい窓を開き

講義に戻る。