[JavaScript_JQuery] 2021.01.28. DAY_66 animate_clearQueue, mouseover, mouseleave

2021. 1. 28. 09:29ㆍWeb_Front-end/JavaScript

 

 

 

  • 아래와같이 연속적으로 발생하는 애니메이션을 다뤄보자

  • 위와같은 코드를 실행하면, 마우스를 올린 횟수만큼 큐가 쌓여 큐의 끝까지 애니메이션을 실행한다
  • 따라서, 마우스를 올린 횟수에 상관없이 지금 이미지에서 마우스가 벗어나면
  • 애니메이션이 종료되게 만들어본다
  • 이미지들을 감싸는 부모태그 div를 만들고, 부모태그를 벗어나면, 큐를 삭제해보자

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'Web_Front-end > JavaScript' 카테고리의 다른 글

[JavaScript_JQuery] 2021.01.28. DAY_66 스크롤 이벤트, 무한 스크롤  (0) 2021.01.28
[JavaScript_JQuery] 2021.01.28. DAY_66 태그의 기본이벤트를 제거하는 함수 preventDefault()/부모노드로 이벤트 전달을 제거하는 stopPropagation()  (0) 2021.01.28
[JavaScript_JQuery] 2021.01.27. DAY_65 dblclick 더블클릭 이벤트함수사용, on함수  (0) 2021.01.28
[JavaScript_JQuery] 2021.01.27. DAY_65 append(), appendTo()  (0) 2021.01.28
[JavaScript_JQuery] 2021.01.27. DAY_65 css()함수의 사용_이미지위치변경, 바운스볼 만들기  (0) 2021.01.28

관련글

댓글 0

티스토리툴바