[JavaScript_JQuery] 2021.01.27. DAY_65 애니메이션_animate(), Queue_clearQueue, stop, hide()함수

 

※ animate() 애니메이션 효과를 사용할 수 있는 함수 사용

 

1. 이미지 위에 마우스가 올라가면 이미지의 크기를 2배로 크게 보이도록 해보기

• 마우스가 나가면 원래의 크기로 돌아가도록 애니메이션을 설정한다
• 사용이벤트 : mouseover, mouseleave

mouseover : 특정 위치에 마우스가 올라가면, 이벤트실행
mouseleave : 특정 위치에 올렸던 마우스가 나가면, 이벤트실행

• 문제점 발생 : 마우스를 한번 들어가고 나간 이미지 태그에 이벤트가 발생하고, 
• 바로 다음 이미지태그에 마우스가 들어가고 나가면 두가지 이벤트가 같이 발생한다
• 즉, 이벤트가 누적된다 (Queue)
  • 따라서, 이벤트를 따로 처리하거나, 연속적인 이벤트를 중지시킬 필요가 있다 

---

※ Queue란?

• JQuery의 효과 함수는 계속 누적된다
• 누적되는 곳은 '큐(queue)'
• 즉 큐에 효과들이 계속 쌓이는 것이다 (선입선출됨)

---

2. 태그영역을 클릭하여, 이동, 크기변경 애니메이션을 부여해본다

• div태그를 생성하고, 
  • 1. 2초동안 오른쪽으로 60이동
  • 2. 2초동안 길이 60증가
  • 3. 높이 60증가
• 1~3 의 효과를 부여하는 코드

---

3. 2번과 같은 효과를 부여한 코드가 실행되는 도중에 큐를 삭제하고 사라지게한다

clearQueue() : 큐를 삭제한다
hide() : 호출한 태그(예를들면) 사라지게한다

• 3번과 같은 방식으로 사용한다면, 갑자기 실행되는 도중에 효과가 끊어지고, 사라진다
• 따라서 좀 더 세밀하게 작업해보자

---

4. stop() 함수를 사용해서, 세밀한 애니메이션 효과 작업하기

큐를 삭제하고, 애니메이션의 진행여부를 선택할 수 있는 stop() 함수를 사용한다

stop(clearQueue, goToEnd)
- clearQueue : true/false 를 부여할 수 있다
--- 큐를 삭제할 것인지에 대한 선택

- goToEnd : true/false 를 부여할 수 있다
--- 지금 진행중인 애니메이션효과를 끝까지 실행할 것인지에 대한 선택

• 이렇게 stop()함수를 사용해서, 세밀한 애니메이션 효과를 부여할 수 있다