jquery - 효과(Effect) 메서드

*효과(Effect) 메서드

• 효과 소요 시간
• 가속도
• 콜백 함수

- 위 3가지를 인자값으로 전달 가능

 

// 기본형

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

------------------------------------------------

1. 효과 소요 시간 - 요소를 숨기거나 노출할 때 소요되는 시간

방법1 : "slow", "normal", "fast"
방법2 : 1,000(1초), 500(0.5초)

------------------------------------------------

2. 가속도 - 슴기거나 노출하는 동안의 가속도 설정

방법1 : "swing" - 시작과 끝은 느리게, 중간은 빠른 속도로 움직임(기본값)
방법2 : "linear" - 일정한 속도로 움직임

------------------------------------------------

3. 콜백 함수 - 노출과 숨김 효과가 끝난 후 실행할 함수 ( 생략 가능 )

 

 

*예제

- HTML

<p>
  <button class="btn1">slideUP</button>
  <button class="btn2">fadeIn</button>
</p>

<p>
  <button class="btn3">toggleSlide</button>
</p>

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

<div class="box">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Repudiandae dicta, cupiditate placeat dignissimos illo rem
    tenetur quisquam suscipit ratione adipisci atque veniam provident necessitatibus perspiciatis,
    amet corporis magnam magni ex!
  </div>
</div>

- JQUERY

$(function(){
//1    $(".btn2").hide();

================================

//2    $(".btn1").on("click", function(){
        $(".box").slideUp(1000, "linear",
        function(){
            $(".btn1").hide();
            $(".btn2").show();
        });
    });
    
================================    

//3    $(".btn2").on("click", function(){
        $(".box").fadeIn(1000, "swing",
        function(){
            $(".btn2").hide();
            $(".btn1").show();
        });
    });
    
================================

//4    $(".btn3").on("click", function(){
        $(".box").slideToggle(1000, "linear");
    });
    
================================    

//5    $(".btn4").on("click", function(){
        $(".box").fadeTo("fast", 0.3);
    });
    
================================

//6    $(".btn5").on("click", function(){
        $(".box").fadeTo("fast",1);
    });
});

================================

설명
1번은 우선 btn2를 숨긴다.

2번은 btn1을 클릭했을때 서서히 위쪽으로 1초에 걸져 슬라이드 하면서 content내용이 사라지고,
동작이 끝나면 btn1은 hide되고 1번에서 숨겨졌던 btn2가 show된다.

3번은 btn2를 눌렀을때 fadeIn 서서히 content내용이 나타나고,
동작이 끝나면 btn2는 hide되고 숨겨졌던 btn1이 show된다.

4번은 btn3을 눌렀을때 위쪽으로 1초에 걸쳐 사라지고,
다시 누르면 사라진 content내용이 1초에 걸쳐 나타난다.

5번은 btn4를 fast로 가속도를 정했고, 0.3은 투명도를 정했다.
클릭하면 content내용이 정해진 투명도 만큼 흐려진다.

6번은 btn5를 fast로 가속도를 정했고, 투명도를 1 즉, 투명하지 않음(기본상태)
클릭하면 5번에서 흐려진 content내용을 투명도 1로 하여 투명하지 않게 만든다.

- 투명도는 0이 완전 투명 0.1부터 서서히 진해지고 1이되면 원래 상태로 됨 -