페이드 효과

애니메이션 효과에 관해서는 3개의 강좌로 나눠서 진행하겠습니다.

애니메이션 강좌에서 사용할 함수는 fadeIn(),fadeOut(),slideUp(),slideDown(), animate() 입니다.

fadeIn(),fadeOut()

fade는 서서히 사라지고 서서히 발생하는 기능을 제공합니다.

어떠한 것인지 아래의 예제 결과를 보도록 합시다.

show click!! hide click!!

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

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

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

<!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.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이 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.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()에 대해서 알아봅시다.