slide effect

slideUp(),slideDown()

slideUp() disappears as the element's height becomes shorter

slideDown()은 요소의 세로 길이가 아래방향으로 길어지면서 다시 보여지는 기능을 갖고 있습니다.

slideDown() has the ability to be redisplayed as the height of the element grows downward.

show click!! hide click!!

위와 같이 위로 사라지고 아래로 나오면서 표시되는 기능이 slide입니다..

위의 예제의 소스를 구현해 보면, 이제 이정도 소스만 보셔도 그냥 아실거라고 생각합니다.

This is a very simple source that makes the [show click] and [hide click] buttons and presses [show click] to slideUp and [hide click] to slideDown.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(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>

Control speed

You can control the time you see slowly and slowly to your liking.

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

You can control the time by putting a number in parentheses. 1000 means 1 second.

So how do you express 0.5 seconds? Since 1000 is 1 second, half of 500 is 0.5 seconds.

It is possible to input after wrapping fast, slow in '' fast means 200 and slow means 400.

Seen slowly and disappears quickly

show click!! hide click!!

The time hidden as shown above can be set differently.

Please practice using the sources below.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(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>

done. thank you

Next time is animtaed.