jQuery의 fadeTo 메서드

fadeTo 메서드는 요소의 opacity 투명도를 특정 값까지 낮출 수 있습니다 (0 - 완전히 투명, 1 - 완전히 불투명). 첫 번째 매개변수로 메서드는 투명도를 어떤 값으로 변경할지 받고, 두 번째 매개변수로는 수행 시간을 받습니다.

버튼을 클릭했을 때 우리 요소가 1초 동안 반투명해지도록 해봅시다. 먼저 다음 HTML 코드를 사용합니다:

html<button id="fade">click me</button>
<div id="elem">text...</div>

CSS도 다음과 같이 있습니다:

css#elem {
  padding: 10px;
  width: 150px;
  height: 150px;
  border: 1px solid green;
  margin-top: 10px;
}

이제 다음 Javascript 코드를 작성합니다:

javascript$('#fade').click(function() {
  $('#elem').fadeTo(1000, 0.5);
});