[jQuery]애니메이션 더하기

지금까지 우리는 CSS에 어떻게 애니메이션을 더했죠?

 

.original{
   height:0px;
   transition: 2s ease;
}

.original.someAnim{
   height:100px;
}

 

우리는 우선 .original이라는 class에 element의 initial height를 지정해주고 javascript를 이용해 click/focus등등 event가 일어나면 .someAnim이라는 class를 더해줘서 animation이 일어나게 했습니다.

 

하지만 jQuery에서는 위와 같은 일을 굉장히 쉽게 할 수 있습니다.

 

기본적인 ANIMATION

 

$('.original').animate({"height":"100px"});

위 코드는 jQuery가 select된 element가 height 0 에서 height 100px 까지 바뀌는 애니메이션을 추가해줍니다. 즉 element의 css에 height를 overwrite해주고 transition도 대신 쳐주는 거죠.

 

하지만 이제 어떤 이벤트가 일어나면 height가 바뀌게 해봅시다.

$('.original').click(()=>{
   $(this).animate({'height':'100px'});

});

 이런 식으로 클릭했을떄 어떠한 animation이 일어나게 할수있습니다.

 

근데 animate메소드는 파라미터로 css object뿐만아니라 다른것들도 받습니다

 

$('.original').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지
   $(this).animate({'height':'100px','width':'290px'},400,"swing",myFunc);
});

순서대로 설명해보면 일단 첫번째 파라미터는 당연히 animate할 값입니다. 여기에선 initial에서 height:100px로 animate를 하는군요. 

 

두번쨰 인자는 속도입니다. animation속도를 가리킴으로서 단위는 ms입니다. 즉 크면 animate가 늦고 작으면 빠릅니다.

 

세번째 인자는 두 값밖에 없습니다 : "swing"은 css의 ease랑 같습니다 처음에 느리고 빨라졌다가 또 느려지는 transition을 가리킵니다. "linear"은 계속 같은 속도 입니다.

 

마지막 인자는 콜백함수로 모든 animation이 끝난후 호출됩니다.

 

기억할점

this는 parent object을 가리킨다 위 상황에서는 .original

event.target은 약간 다르다 왜냐하면 inner most를 리턴하기 때문이다.

만약 .orginal 안에있는 .anotherElem을 클릭했다면 .original이 리턴되는것이 아닌 .anotherElem이 리턴됨. 

 

FADE OUT and IN

 

만약에 우리가 opacity를 animate를 하고 싶다고하자

$('.original').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $(this).animate({'opacity':'0'},400,);
   
});

이런 식으로 animate 메소드를 사용할 수 있지만 jQuery에 내장되어 있는 fadeOut메소드도 사용가능하다

$('.original').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $(this).fadeOut(400);
   
});

이렇게 내장되어있는 메소드를 사용하여 fadeOut을 할 수있다. 인자는 animation의 시간이다.

 

근데 기억해야 될점은 fadeOut 메소드는 어떠한 element를 fade out한뒤 마치 display:none;을 한것 처럼 element의 자리를 없애 버린다.

 

$('.original').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $(this).fadeOut(400).fadeIn(500);
   
});

이렇게 jQuery Chaining을 이용하여 fadeOut 과 fadeIn이 순차적으로 일어나게 할수 있다.

 

그리고 fadeTo라는 메소드가 있는데. 이것은 사용자가 입력한 opacity로 변한다.

 

$('.original').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $(this).fadeTo(2000,0.2)
   		  .fadeTo(2000,0.8);
   
});

이런식으로 시간과 opacity를 인자로 넣어서 사용가능하다.

 

HIDE AND SHOW

만약에 opacity를 건드리지 않고 dispaly:none / display:block으로 바꾸고 싶으면 어떻게 할까? 바로 Hide and Show 메소드를 사용할수 있다.

$('.original').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $(this).hide();
   
});

이제 .original을 클릭하면 .original은 사라질것이다 (display:none)

 

$('.original').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $(this).show();
   
});

이것은 나타나게 할것이다. 

 

근데 hide와 show역시 인자로 animation의 시간을 넣을 수있다. hide는 fadeIn과 같이 그 자리에서 사라지고 나타나는게 아니라 왼쪽으로 날라가며 shrink되면서 fadeout이 된다. show는 반대로 오른쪽에서 날라온다.

 

$('.original').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $(this).hide(1000).show(1000);//왼쪽으로 날라갔다고 다시 오른쪽으로 날라옴
   
});

 

Toggle이라는 메소드는 hide와 show를 합친것이다. 

$('.original').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $(this).toggle(1000);
   
});

위에서 처음 클릭시 .original이 사라질 것이다. 그래서 다시 클릭하면 나타나야 될거 같지만 .original은 이미 사라져서 클릭할 수없다. 그래서 toggle을 사용할때는 이벤트 핸들러를 다른곳에 달아놔야한다.

$('btn-1').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $('.original').toggle(1000);
   
});

 

slideDown, slideUp, slideToggle

$('btn-1').click(function(){//this를 사용하기 때문에 arrow 함수 사용금지

   $('.original').slideDown(1000);//말그대로 1000ms동안 slideDown함 
   //하지만 slide하는 것처럼 보일뿐 fadeOut처럼 완전히 없어짐
   
    $('.original').slideUp(1000,myFunc);//slide up이 끝나고 콜백이 실행되게 할 수있다
    
     $('.original').slideToggle(1000,myFunc);//slide up down toggle 각각 slide마다 콜백함수가 호출됨
   
});