[제이쿼리]- 효과 메서드 effect

효과메서드를 이용하면 css스타일을 이용하는 것보다 훨씬 더 쉽고 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 보이게 만들 수 있다. 또한 애니메이션 메서드까지 사용하면 다양한 동작(Motion)까지 적용할 수 있다.

 

[ 기본형 ]

$('요소선택').효과메서드(효과 소요시간, 가속도, 콜백함수);

- *효과 소요시간 : 요소를 숨기거나 노출할 때 소요되는 시간을 말한다. 단위는 ms단위(1000 = 1초)를 사용한다. 

또는 문자열로 지정된 키워드인 'slow', 'nomal', 'fast'라고 적으면 지정된 소요시간이 적용된다. 

 

-*가속도 : 숨기거나 노출하는 동안의 가속도를 결정함. 가속도에 적용할 수 있는 값은 'swing' 또는 'linear' 를 적용할 수 있다. 

'swing' = 시작과 끝은 느리게, 중간은 빠른 속도로 움직인다. 

'linear' = 일정한 속도로 움직인다. 

기본값은 'swing'이다.

 

-*콜백함수 : 콜백함수는 생략이 가능하다. 콜백함수는 효과가 끝났을 때 실행할 함수이다. 콜백함수는 익명함수로 쓴다. 

---

[ 종류 ] 

 

1. 숨김 

- hide( )

: display:none과 같이 요소를 숨긴다. 

 

- fadeOut( )

: 요소가 점점 투명해지면서 숨겨진다. 

 

- slideUp( )

: 요소가 위로 접히면서 숨겨진다. 

---

2. 노출

- show( )

: display:block과 같이 요소를 나타낸다. 

 

- fadeIn( )

: 숨겨진 요소가 점점 선명해지면서 나타난다.

 

- slideDown( )

: 숨겨진 요소가 아래로 펼쳐지며 나타난다. 

---

3. 숨김, 노출

 

- toggle( )

: show( ), hide( ) 효과를 적용한다. 

 

- fadeToggle( )

: fadeIn( ), fadeOut( ) 효과를 적용. 

 

- slideToggle( )

: slideUp, slideDown( ) 효과를 적용한다. 

 $(".box").slideToggle(500, "linear");

 

- fadeTo( )

: 지정한 투명도를 적용한다. 

기본형이 좀 다르다

[fadeTo기본형]

$('요소선택').효과메서드(효과 소요시간, 투명도(0~1), 콜백함수);

 //.box를 fast한 속도로 30% 선명하게 나타낸다

          $(".box").fadeTo("fast", "0.3");

---

예제 ) 

<p>

      <button class="btn1">slideUp</button>

      <button class="btn2">fadeIn</button>

    </p>

    <p>

      <button class="btn3">slideToggle</button>

    </p>

    <p>

      <button class="btn4">fadeTo(0.3)</button>

      <button class="btn5">fadeTo(1)</button>

    </p>

    <div class="box">

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore sequi

      iste, odio dolores ipsum sed, dignissimos minima unde ducimus ea

      doloremque animi, debitis illum labore libero odit eligendi. Asperiores,

      doloribus?

    </div>

1. slideUp 버튼을 누르면 slideUp  실행되면서 버튼은 사라지고 그 자리에 숨겨져 있던 fadeIn 버튼이 나타나기

//fadeIn 버튼 숨기기

        $(".btn2").hide();

        //sideUp버튼을 클릭하면 실행된다.

        $(".btn1").on("click", function () {

          //.box를 1초동안 일정한 속도로 slideUp하고

          $(".box").slideUp(1000, "linear", function () {

            //slideUp효과가 끝나면 .btn1을 숨기고 숨겨놓았던 .btn2 fadeIn 버튼을 다시 나타내기

            $(".btn1").hide();

            $(".btn2").show();

          });

        });

 

2. fadeIn 버튼을 누르면 fadeIn하면서 나타나고 fadeIn버튼은 다시 숨겨지고 slideUp버튼 나타나기

//fadeIn 버튼을 클릭하면 실행

        $(".btn2").on("click", function () {

          //.box1을 1초동안 swing한 속도로 나타낸다.

          $(".box").fadeIn(1000, "swing", function () {

            //fadeIn 효과가 끝나면 .btn2(fadeIn)은 숨겨지고 다시 .btn1(slideUp)버튼 나타내기

            $(".btn2").hide();

            $(".btn1").show();

          });

        });

 

3. slideToggle

 //slideToggle버튼을 누르면 실행

        $(".btn3").on("click", function () {

            //.box를 접어서 숨기거나 펼쳐서 나타낸다. 숨겨져있으면 펼쳐지고, 나타나져있으면 접어서 숨긴다.

          $(".box").slideToggle(500, "linear");

        });

 

4. fadeTo

(기본형이 좀 다르다)

 //fadeTo(0.3)버튼을 누르면 실행된다.

        $(".btn4").on("click", function () {

          //.box를 fast한 속도로 30% 선명하게 나타낸다

          $(".box").fadeTo("fast", "0.3");

        });

        //fadeTo(1)버튼을 누르면 실행된다.

        $(".btn5").on("click", function () {

          //.box를 slow한 속도로 100% 선명하게 나타낸다

          $(".box").fadeTo("slow", "0.3");

        });