제이쿼리(jQuery)는 animte() 객체를 사용한 다양한 동적 기능을 제공합니다. 그 중에서도 특히 opacity 속성이 많이 사용되는데 이를 이용해 원하는 문서 요소를 쉽고 간단하게 투명하게 만들 수 있습니다.


# jQuery animate() 함수의 opacity 속성 사용하기
아래는 간단한 문법 및 사용방법입니다.

$('#testEle').animate({opacity: '1'}, 1000};
$('#요소명').animate({opacity: '설정값'}, 지연시간};


선택 가능한 옵션으로 아래와 같이 두 가지 값을 인자로 넘겨줄 수 있습니다.

! 간단한 예제코드 보기
서서히 사라지거나 나타나게 하는 경우 아래와 같이 사용할 수 있습니다.
@ opacity.html
<span class="test">Opacity test code</span>

위 엘리먼트 요소를 서서히 감추거나 나타나도록 아래와 같이 스크립트를 사용합니다.
@ opacity.js
var test = $('.test');

test.animate({opacity: "0"}, 500);
test.animate({opacity: "1"}, 1000);

먼저 첫번째 코드는 test 엘리먼트 요소를 500ms의 속도로 0이 되도록 변환, 즉 opacity를 0으로 만들어 사라지게합니다.
그리고 다음 두번째 코드 예제는 test 요소를 1000ms의 속도로 opacity가 1이 되게 함. 즉, 다시 보이도록 해줍니다.


# animate(), opacity 실전예제보기
이번 예제는 좀 더 구체적인 예제를 사용하여 알아봅니다.

@ opacity.html
<div id="testEle"></div>
<button type="button" class="testbt1 bt" >{ opacity: 0 }</button>
<button class="testbt2 bt" type="button" >{ opacity: 1 }</button>

@ opacity.css
#testEle {
  margin: 0 auto;
  width:50px;
  height: 50px;
  background: #00f;
}
.bt {
  margin: 2px;
}

@ opacity.js
$(document).ready(function() {
  $('.testbt1').click(function(){
    $('#testEle').animate({opacity:"0"}, 1000);
  });
  $('.testbt2').click(function(){
    $('#testEle').animate({opacity:"1"}, 1000);
  });
})

위 코드를 실행하면 어떻게 될까요? 실제로 아래 버튼을 클릭해 알아보세요.





# 위 예제의 자세한 설명, animate() opacity
그럼 위 예제는 어떻게 동작하는 것일까요?

i. opacity 뒤에는 0부터 1까지 투명도를 설정할 수 있습니다.
ii. 뒤에 적힌 500은 밀리세컨드를 나타내며 변화되는 속도를 정할 수 있습니다. 참고로 숫자가 아닌 다음의 값도 사용할 수 있습니다.
- fast 또는 slow(천천히 또는 빠르게 변환)


! 마치면서...
참고로 아래와 같이 밀리세컨드가 아닌 fast, slow 처럼 literal 표기가 가능합니다.
test.animate({opacity: "0"}, fast);
// test 문서객체를 빠른 속도로 사라지게 함

test.animate({opacity: "1"}, slow);
// test 문서객체를 느린 속도로 다시 나타내게 함

여기까지 jQuery에서 많이 사용되는 animate() 메소드의 opacity 속성을 알아보았습니다.