jQuery의 fadeToggle 메소드

fadeToggle 메소드는 slideToggle 메소드와 유사하게 작동하며, 요소를 보였다 숨겼다 하는 효과를 번갈아 구현합니다.

예를 들어, 동일한 버튼을 클릭하여 요소를 보이거나 숨길 수 있습니다. 다음 HTML 코드를 사용하여 이 메소드를 구현해 보겠습니다:

html<button id="toggle">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$('#toggle').click(function() {
  $('#elem').fadeToggle(1000);
});