[JQuery] 객체에 슬라이드 효과 입히기

#제이쿼리 #쉽지만이쁜효과 #slide #제이쿼리 #메뉴효과 #up #down #toggle #토글 #입력값

안녕하세요, 배곧동개발자 입니다.

제이쿼리가 좋은 이유는 여러가지가 있겠지만 여러 효과를 쉽게 컨트롤 할 수 있다는 점이 있어요.

그 중 하나로 slide를 알아볼까 합니다.

1. slide event

슬라이드, 미끄러진단 느낌이죠? 스윽하고 내려오고 스윽하고 올라가는! 그러한 모션을 아주 쉽게 할수있어요.

자바스크립트로만 구현 하려면 어우.. 저는 구현 안할랍니다. 슬라이드효과는 3가지로 구성되어 있는데 하나하나 알아보도록 합시다.

2. slideUp

먼저 slideUp 입니다. 이미지 혹은 객체를 안보이게 해버리는데, 이팩트가 위로 스르륵 올라가는 효과를 줍니다.

$("#btnUp").on("click",function(){
 // slideUp(시간) : 시간을 input으로 객체를 올림
 $("#bgDev").slideUp(1000);
});

이렇게 간단한게 객체에 slideUp 라고 붙혀만 주면 됩니다. 1000은 초 단위로, 1000 = 1초, 100 = 0.1초! 아시지요?

저렇게만 해주면 간단하게 slideUp을 구현할 수 있습니다.

3. slideDown

slideDown도 동일하게 구성 가능합니다. 숨겨져있던 객체를 보이도록 하는데 아래로 스르륵 내려오는 효과를 주는 것이지요.

$("#btnDown").on("click",function(){
 // slideDown(시간) : 시간을 input으로 객체를 내림
 $("#bgDev").slideDown(1000);
});

이렇게 slideDown을 입혀주면 끝!

4. slideToggle

이번에는 조금 다른 것입니다. toggle 이라? 뭐를 뜻할까요? up과 down을 합쳐놓은 것입니다. 객체가 안보일 때는 down을 실행해주고 객체가 보일 때는 up을 실행합니다.

$("#btnToggle").on("click",function(){
 // slideToggle(시간) : 시간을 input으로 객체의 상태를 반대로 변경
 $("#bgDev").slideToggle(1000);
});

쉽게 말해서 올렸다 내렸다 하는 것이지요.

5. input parameter

위에 언급했듯이 input parameter로는 시간을 줄수 있는데 모든 언어에서 일치하듯 1000*n = n초를 의미해요. 여기에 fast, slow등을 넣어도되는데 그냥 시간 넣으시는게 마음이 편합니다.

물론, 빈값 넣으셔도 작동해요! default가 1초였던가? 그렇습니다!

6. 응용하기

slideToggle 이미지 보시면 뭔가 떠오르는거 없으신가요? 바로 메뉴입니다. 메뉴객체에 onFocus, onBlur 이벤트에 $(this).slideToggle()을 넣어주면 가볍게 메뉴바 완성! 응용할곳이 막 보이지요? 가볍게 한번 짜보자면

$("[id^=menu]").on("focus",function(){
  $(this).slideToggle();
  // 또는 $(this).slideDown();
});

$("[id^=menu]").on("blur",function(){
  $(this).slideToggle();
  // 또는 $(this).slideUp();
});

이렇게 짤 수 있겠네요! 보통은 남들이 짜놓은 메뉴 쓰는데, 이런 식으로 짜놓은 겁니다. 재미있죠?

이처럼 제이쿼리에서 지원하는 함수들은 간단하면서 쓸만한게 아주 많습니다! 시간 되실 때 api document 하나하나 찾아보시면서 익혀보시길!

이만, 배곧동개발자 였습니다.