devil cat everdevel character

현재 작업 중..

disney Teyon kin

슬라이드 효과

slideUp(),slideDown()

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

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

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

show click!! hide click!!

위와 같이 서서히 사라지게 하고 서서히 보이게 하는 기능을 구현해주는기능이 fade입니다.

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

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

<!doctype html>
<html>
<head>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.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>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.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에 대해서 알아봅시다.

다음강좌는 8강.애니메이션 효과 입니다. 클릭하면 다음 강좌로 이동합니다.