🐷전동준(Jeon DongJun)

Go with the flow

[web]jQuery 복습 3

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!


jQuery 복습 3️⃣


animate()

  • jQuery에는 애니메이션 효과를 만드는 animate 메서드가 존재한다.
  • 문법 : .animate(properties [, duration] [, easing] [, complete])
    • properties 부분에는 애니메이션 효과를 줄 속성을 넣어준다.
    • duration 은 애니메이션 효과를 완료할 때 까지 걸리는 시간으로 단위는 ms(밀리세컨즈), default는 400이다. 숫자가 적을수록 빠르게, 클수록 느리게 효과가 발현된다.
    • easing은 애니메이션 효과의 방식을 정한다. swing과 linear가 가능하며 default는 swing이다.
    • complete는 요소가 사라지고 나서 수행할 것을 적어준다.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • jQuery 라이브러리를 호출해준다.
    • 누르면 갖가지 기능들을 사용할 수 있게 슬라이딩되는 <b> 태그 요소를 만든다.
    • <div> 영역 하나를 생성한 뒤 그 안에 누르면 메서드 효과가 실행되는 p태그 요소들을 생성
    • 이미지 요소를 하나 생성해서 나오지 않았을 때의 설명 alt와 id를 image01로 지정해준다.
  • CSS style
    • img : 크기 200px * 200px, 위치는 절대위치이며 왼쪽에서 200px 위에서 100px 떨어져있게 지정
    • p : 너비 100px, 테두리는 1px 굵기의 빨간 일반 테두리선을 적용, 위치는 절대위치이며 왼쪽에서 10px 떨어지게 지정했고, 요소는 보이지 않게해놨다.
  • JS
    • 즉시 실행 함수 적용
    • b를 클릭했을 때
      • p에 toggle()이 적용돼 b태그를 누를 때 마다 사라졌다 생겼다 한다.
      • 각 p 태그 요소에 자신의 기존 위치에서 자기의 순서 만큼(i) 50 을 곱한 px 값만큼 위에서 밑으로 이동하는 효과를 적용해며, 효과 완료시간은 1000 밀리초(1초)
    • p를 클릭했을 때
      • 클릭당한 p태그 요소를 변수 ele에 저장
      • 클릭당한 요소의 배경색을 핫핑크로, 그 형재 p태그 요소들은 배경색을 없음으로 만들어준다.
      • ele 요소에 hide라는 내용(텍스트)를 포함하고 있다면, 이미지요소를 숨기는 hide() 메서드 적용
      • ele 요소에 show라는 내용(텍스트)를 포함하고 있다면, 이미지요소를 나타내는 show() 메서드 적용
      • ele 요소에 toggle이라는 내용(텍스트)를 포함하고 있다면, 이미지요소가 숨었다 나타나는 toggle() 메서드를 적용
      • ele 요소에 slideUp이라는 내용(텍스트)를 포함하고 있다면, 이미지요소가 접히는 slideUp() 메서드를 적용
      • ele 요소에 slideDown 이라는 내용(텍스트)를 포함하고 있다면, 이미지요소가 펼쳐지는 slideDown() 메서드를 적용
      • ele 요소에 slideToggle이라는 내용(텍스트)를 포함하고 있다면, 이미지요소가 접혔다 펼쳤다하는 slideToggle() 메서드를 적용
      • ele 요소에 fadeOut이라는 내용(텍스트)를 포함하고 있다면, 이미지요소가 서서히 흐려지는 fadeOut() 메서드를 적용
      • ele 요소에 fadeIn 이라는 내용(텍스트)를 포함하고 있다면, 흐려진 이미지요소가 서서히 선명해지는 fadeIn() 메서드를 적용
      • ele 요소에 fadeTo 라는 내용(텍스트)를 포함하고 있다면, 이미지 요소가 0.2의 투명도 만큼 4초에 걸쳐 흐려지는 fadeTo() 메서드를 적용
      • ele 요소에 fadeToggle 이라는 내용(텍스트)를 포함하고 있다면, 이미지 요소가 서서히 흐려졌다 다시 서서히 선명해지는 fadeToggle() 메서드를 적용
      • ele 요소에 animate 라는 내용(텍스트)를 포함하고 있다면, 아이디가 image01인 요소를 2초에 걸쳐 크기 500px * 500px, 왼쪽에서 600px 위에서 0px 떨어지도록 만드는 animate()메서드를 적용

2022

[web]jQuery 복습 3

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

13 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

14 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

5 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

10 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑