[jQuery] 슬라이딩 애니메이션 예제: 부드러운 슬라이딩 효과로 콘텐츠를 전환하는 방법

 

 

 

설명

 

jQuery의 슬라이드 효과를 사용하면 좀 더 다채로운 웹 페이지를 만들 수 있습니다.

이 포스팅에서는 jQuery의 슬라이드 애니메이션에 대해서 자세히 알아보도록 하겠습니다.

 

먼저, jQuery에는 3가지 슬라이드 효과를 줄 수 있는 메서드가 있습니다.

3가지 슬라이드 효과의 종류는 아래와 같습니다.

 

• slideDown()
• slideUp()
• slideToggle()

 

slideDown은 아래로 슬라이드 되는 것이고, slideUp는 위로 슬라이드 되는 것입니다.

slideToggle는 클릭할 때의 상태에 따라 위로 혹은 아래로 슬라이드 됩니다.

 

$(selector). slideToggle(speed, callback);

 

문법은 위와 같이 사용합니다.

 

speed 위치에는 "slow", "fast" 또는 밀리초가 들어갑니다. 

 

 

토글버튼 클릭

 

 

위의 이미지와 같이 토글 버튼을 클릭하여 원하는 상자를 슬라이드 하여 내리거나, 올릴 수 있습니다.

 

토글 버튼 클릭 시 상자 보이고 숨겨지는 이미지

 

 

토글 버튼이기 때문에 동일한 버튼 클릭으로 상자를 보이거나 숨기는 것이 가능합니다.

 

 

 

반응형

 

 

간단 예제

 

 

slideDown()과 slideUp()도 존재하지만 버튼하나로 두 개의 기능을 동시에 사용할 수 있는,

slideToggle 함수를 이번 예제에서는 사용해 보도록 하겠습니다.

 

예제의 코드는 아래와 같이 간단하게 구현 할 수 있습니다.

 

$(document).ready(function() {
  $('#toggle-btn').click(function() {
    $('#content').slideToggle(500);
  });
});

 

 

728x90

 

 

이 예제에서는 먼저 ID가 "toggle-btn"인 버튼에 클릭 이벤트 핸들러를 연결합니다.

 

버튼을 클릭하면 ID가 "content"인 div에서 slideToggle 함수를 호출하여,

현재 상태(표시 또는 숨김)에 따라 div를 위 또는 아래로 슬라이딩합니다.

 

'slideToggle' 함수는 밀리초 단위의 애니메이션 지속 시간인 단일 인수를 사용합니다.

이 경우 애니메이션을 완료하는 데 0.5초가 걸리도록 지정하기 위해 500을 전달합니다.

 

이렇게 코딩하면, 사용자가 버튼을 클릭할 때 콘텐츠 div가 0.5초에 걸쳐 부드럽게 위아래로 슬라이드 되어,

콘텐츠를 표시하거나 숨길 수 있는 멋진 시각적 효과를 제공합니다.

 

CSS는 처음 로드될 때 콘텐츠가 숨겨지도록 기본적으로 display 속성을 none으로 설정했습니다.

또한 패딩, 배경색 및 테두리를 div에 추가하여 눈에 띄게 만들었습니다.

 

 

결론

 

jQuery를 사용한 슬라이드 애니메이션 효과에 대해서 알아보았습니다.

코드가 매우 간단하지만, 간단한 코드로 애니메이션 효과를 줄 수 있기 때문에 많은 활용 방법이 존재합니다.

또한 애니메이션의 속도를 조절 할 수 있기에 개발자의 의도에 맞게 페이지를 구성해 볼 수 있습니다.

 

슬라이드 이외에도 많은 jQuery 효과들이 존재합니다.

이런 애니메이션 효과를 활용하여 사용자의 흥미를 유발하는 웹페이지를 만들어 보시길 바랍니다.