45일차 - [JQ] effect

안녕하세요. pitang입니다.

오늘은 jQuery의 effect와 html의 get-set에 대해 알아보겠습니다.

 

jQuery-effect

jQuery라이브러리는 문서 객체를 보이거나 보이지 않게 만드는 간단한 효과 메서드를 제공한다.

간단한 효과 메서드에는 속도를 매개변수로 입력할 수 있고, 입력하지 않으면 기본 값인 500ms가 적용된다.

 

hide() / show() - 숨기기 / 표시

toggle() - 표시된 요소가 숨겨지고 숨겨진 요소가 표시

 

ex1) hide()

18effect-hide.html

console

console

 

ex2) show()

20effect-show.html

console

console

 

ex3) toggle()

22effect-toggle.html

console

console

 

ex4) hide() show() toggle() 

25effect-hide-show-toggle.html

console

console

-> 효과를 사진으로 보여주긴 어렵지만, 코드를 작성해 출력해보면 효과가 적용된 것을 볼 수 있다.

---

fadeIn() - fade 되면서 나타남.

fadeOut() - fade되면서 사라짐.

fadeToggle() - fadeIn()과 fadeOut()이 번갈아 나타남.

 

ex1)

26effect-fade.html

console

console

---

slideUp() - slide되며 위로 접힘.

slideDown() - slide되며 아래로 열림.

slideToggle() - slideUp()과 slideDown()이 번갈아 나타남.

 

ex1)

28effect-slide.html

console

console

---

animate() - 사용자 정의 애니메이션을 만드는 데 사용

animate({매개변수}, 시간, 콜백 파라미터)

여기서 매개변수는 애니메이션 할 CSS 속성을 정의하고, 콜백 파라미터는 애니메이션이 완료된 후 실행되는 기능이다.

 

ex1)

29effect-animate.html

console

 

ex2)

30effect-animate.html

console

-> width, height, borderWidth 순으로 변하는 것을 알 수 있다.

 

ex3)

31effect-animate.html

console

-> 마우스가 올라갔을 때, 왼쪽에서 5px 떨어져 있다가 마우스가 내려가면 다시 돌아오는 것을 볼 수 있다. 

 

ex4)

32effect-animate.html

console

-> 마우스가 올라갔을 때, opacity가 1(불투명) 해지고 마우스가 내려가면 opacity가 0(투명)해 지는 것을 볼 수 있다.

---

ex1) 

#btn1은 toggle과 "또 다른일 계속 진행"이 같이 실행되고,

#btn2는 toggle이 끝난 후, "또 다른일 계속 진행 222"가 실행된다.

33effect-complete.html

console

 

 

 

 

감사합니다.

 

*m1 맥북을 사용 중입니다.*