슬라이드 효과

slideUp(),slideDown()

slideUp()은 요소의 세로 길이가 윗방향을 향해 세로길이가 짧아지면서 없어지고

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

어떠한 것인지 아래의 예제 결과를 보도록 합시다. show click, hide click을 누르면서 확인해주세요.

show click!! hide click!!

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

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

쇼클릭, 하이드클릭 버튼을 만들어서 쇼를 누르면 slideDown, 하이드를 누르면 slideUp 되게끔 해놓은 아주 간단한 소스 입니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</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>

속도 제어하기

앞에 강좌에서와 마찬가지로 똑같은 방법으로 속도 제어가 가능합니다.

slideUp(1000), slideDown(500), slideUp('slow'), slideDown('fast')

괄호 안에 숫자를 넣어서 시간 제어가 가능합니다. 1000은 1초를 뜻합니다.

그렇다면 0.5초는 어떻게 표현할까요 1000이 1초 이므로 절반인 500은 0.5초가 됩니다.

fast,slow를 ''에 감싼후 입력이 가능한데요 fast는 200이고 slow는 400을 뜻합니다.

천천히 보여지고 빠르게 사라지기

show click!! hide click!!

위와같이 보여지는 시간 감춰지는 시간을 각각 다르게 설정이 가능 합니다.

아래 소스를 활용해서 연습을 해보시기 바랍니다. 

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</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>

이것으로 slideUp(),slideDown()에 대한 강좌를 마치겠습니다.

다음강좌는 요소를 이동시켜주는 animate에 대해서 알아봅시다.