happy cat image

everdevel

Web Technology, 에버디벨

UI 변경

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
클라우드 개발환경 제공 (로그인 후 메인에서 EEOS 클릭)

페이드 효과

애니메이션 효과에 관해서는 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="http://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="http://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()에 대해서 알아봅시다.

2019년 에버디벨이 제안하는 클라우드 개발환경(EEOS)이 드디어 오픈했습니다.
이제 개발환경구축없이 웹브라우저에서 웹개발하자
HTML5, CSS3, JavaScript를 넘어 MySQL, PHP까지
앞으로 지원 언어는 더 늘어날 예정 react, node, angular등
웹브라우저만 있다면 기기도 가리지 않아요. 이제 아이패드에서도 웹개발해요.!!
자기만의 클라우드 에디터, 저장공간, 데이터베이스, 접속 URL(eeosXXX.adjkl.com/eeos/)을 제공해요.
현재 웹코딩 시작하기와 PHP200 독자는 mybook(책과 관련된 기능 제공)에서 사용할 수 있습니다.

EEOS 신청하기 EEOS 알아보기

강좌로 돌아가기