[jQuery] jQuery CSS 애니메이션 메서드

26 Dec 2023

jQuery는 CSS를 사용하여 요소의 애니메이션을 쉽게 처리할 수 있는 메서드를 제공합니다. 다음은 jQuery의 CSS 애니메이션 메서드에 대한 설명입니다.

fadeIn()

fadeIn() 메서드는 지정된 요소를 서서히 나타나게 합니다. 아래의 예시 코드를 통해 fadeIn() 메서드의 사용법을 확인해 보세요.

$("button").click(function(){
  $("div").fadeIn();
});

fadeOut() 메서드는 지정된 요소를 서서히 사라지게 합니다. 아래의 예시 코드를 통해 fadeOut() 메서드의 사용법을 확인해 보세요.

$("button").click(function(){
  $("div").fadeOut();
});

slideUp() 메서드는 지정된 요소를 서서히 사라지도록 하고, 높이가 0이 될 때까지 서서히 축소합니다. 아래의 예시 코드를 통해 slideUp() 메서드의 사용법을 확인해 보세요.

$("button").click(function(){
  $("div").slideUp();
});

slideDown() 메서드는 서서히 나타나도록 하고, 높이를 서서히 증가시킵니다. 아래의 예시 코드를 통해 slideDown() 메서드의 사용법을 확인해 보세요.

$("button").click(function(){
  $("div").slideDown();
});

animate() 메서드는 CSS 속성을 사용하여 원하는 애니메이션을 제어할 수 있는 가장 유연한 메서드입니다. 아래의 예시 코드를 통해 animate() 메서드의 사용법을 확인해 보세요.

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: 'toggle'
  });
});

이와 같이, jQuery의 CSS 애니메이션 메서드들을 사용하여 웹 페이지에서 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다.