[jQuery / 제이쿼리] Effect (이펙트), 애니메이션 추가하기

jQuery를 이용해 애니메이션 효과 추가하기

 

jQuery에는 다양한 애니메이션 효과를 제공한다. 

https://www.w3schools.com/jquery/jquery_ref_effects.asp

위 사이트에서 다양한 종류의 Effect Method를 확인할 수 있다. 

 

Effect Method는 간단하게 selector에 적용할 수 있다. 

 

$(selector).effectMethod()

 

 

예를 들어 h1요소를 화면에서 사라지게 하고 싶다면

$("h1").hide();

라고 작성하면 된다. 

 

 

 

 

 

Effect Methods(애니메이션 효과 설명)

 

간단한 설명을 위해 h1요소에 애니메이션을 적용한다고 가정했다. 

 

• $("h1").animate()
  // h1이 설정한 애니메이션으로 실행됨
  // ex) $("h1").animate({opacity: 0.5});
  // 이때 {}안에는 css 속성 중 수치를 값으로 갖는 것만 추가 가능
• $("h1").clearQueue()
  // h1요소의 큐에 남아있는 애니메이션 효과를 모두 제거
• $("h1").delay()
  // h1요소의 큐에 남아있는 애니메이션 효과에 지연시간(delay) 설정
• $("h1").dequeue()
  // h1요소의 큐에서 다음 애니메이션을 제거하고 애니메이션을 실행
• $("h1").fadeIn()
  // h1요소가 서서히 나타남
• $("h1").fadeOut()
  // h1요소가 서서히 사라짐
• $("h1").fadeToggle()
  // fadeIn()과 fadeOut() toggle
  // toggle: 1, 2라는 두 가지 상태가 있을 때, 1일때 toggle하면 2가되고 2일때 toggle하면 1이됨
• $("h1").finish()
  // h1요소의 큐에 있는 애니메이션을 중지하고 삭제함
• $("h1").hide()
  // h1요소를 숨김
• $("h1").show()
  // h1요소를 보여줌(나타냄)
• $("h1").toggle()
  // hide()와 show() toggle
• $("h1").slideDown()
  // h1요소가 아래로 내려오면서 나타남
• $("h1").slideUp()
  // h1요소가 위로 올라가면서 사라짐
• $("h1").slideToggle()
  // slideDown()과 slideUp() toggle

 

 

Effect Methods 사용 예시

 

예시1) toggle(), slideToggle(), fadeToggle()

 

 

html 코드

js 코드

실행화면

 

 

 

예시2) 중첩된 애니메이션 사용하기

 

js 코드

 

 

 

 

 

 

공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)