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

 

설명

 

jQuery를 사용하여 슬라이드 효과를 줄 수 있습니다.

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

 

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

 

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

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

 

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

 

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

 

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

 

토글버튼 클릭

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

 

반응형

 

 

간단 예제

 

 

$(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에 추가하여 눈에 띄게 만들었습니다.