DAY32(2) - 이펙트

• 제이쿼리는 웹 페이지에 이펙트 효과를 손쉽게 넣을 수 있는 다양한 메소드를 제공한다. 이러한 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate() 메소드를 통해 설정을 변경해서 사용할 수도 있다.

📌 1. 이펙트 메소드

📍 1-1. hide & show

• hide() : 선택한 요소를 숨긴다.

  • $("요소").hide()

• show() : 선택한 요소를 나타나게 한다.

  • $("요소").show()

• toggle() : 숨겨져 있는 요소는 나타나게 하고, 보여지고 있는 요소는 숨긴다.

  • $("요소").toggle()

📍 1-2. fade

• fadeOut() : 선택한 요소를 서서히 사라지게 한다.

  • $("요소").fadeOut()

• fadeIn() : 선택한 요소를 서서히 나타나게 한다.

  • $("요소").fadeIn()

• fadeTo() : 지정한 opacity값까지 fade효과를 적용한다.

  • $("요소").fadeTo(속도값, opacity값)
  • ex : $("요소").fadeTo(1000, 0.5)
    • 요소의 opacity를 1초간 0.5까지 변경한다.

• fadeToggle() : 숨겨져 있는 요소는 fadeIn하고, 보여지고 있는 요소는 fadeOut한다.

  • $("요소").fadeToggle()

📍 1-3. slide

• slideDown() : 선택한 요소를 내려오면서 나타나게 한다.

  • $("요소").slideDown()

• slideUp() : 선택한 요소를 올라가면서 사라지게 한다.

  • $("요소").slideUp()

• slideToggle() : 숨겨져 있는 요소는 slideDown하고, 보여지고 있는 요소는 slideUp한다.

  • $("요소").slideToggle()

---

📌 2. 이펙트 제어

📍 2-1. 속도 제어

• 밀리초 숫자나 slow, fast등의 예약어를 파라미터로 전달하여 이펙트의 속도를 조절할 수 있다.

  • $("요소").fadeOut('slow') // 느리게 fadeOut
  • $("요소").slideDown(2000) // 2초간 slideDown

📍 2-2. 지연 시간 설정

• delay() : 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정한다.

  • $("요소").이펙트1.delay(지연시간값).이펙트2
  • ex : $("요소").fadeOut(500).delay(1000).fadeIn(2000);
    • fadeOut과 fadeIn 사이에 1초의 지연시간을 설정한다.

📍 2-3. 이펙트 중단

• stop() : 선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킨다.

  • $("요소").stop()

• finish() : 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 종료한다.

  • $("요소").finish()

---

📌 3. 복수 이펙트 적용

📍 3-1. 이펙트 체인

• 하나의 이벤트에 나열식으로 이펙트를 적용해 연속되는 이펙트를 갖게 할 수 있다. 또한 파라미터로 함수도 전달할 수 있다.

  • ex

  $("요소")
  	.fadeOut('slow').fadeIn('slow').delay(1000)
  	.slideUp().slideDown('slow',function(){alert('end')});

📍 3-2. animate()

• animate()메서드를 사용해 속성값을 변경하는 것으로 이펙트를 줄 수 있다.

  • $("요소").animate({속성 : 값, 속성 : 값 ... }, 속도값)
  • ex

        $("요소").animate({
             width : "300px",
             opacity : 0.4,
             marginLeft : "50px",
             fontSize : "30px",
             borderWidth : "10px"
         },3000);