[jQuery] 제이쿼리 기초 및 사용방법 part.2 hide, show, toggle

#hide #show #toggle #jQuery #숨기기 #보이기 

#fadeOut #fadeIn #fadeToggle #slideDown #slideUp #slideToggle #html #css

숨기고 보이는 방법은 어렵지 않다 먼저 예시를 보여주겠다

 

hide

$("#hacs").hide();

 

show

$("#hacs").show();

 

id값이 hacs인것을 숨기고 보여주는 예시이다.

 

 

'그러면 숨기고 보일때마다 버튼 2개만들어서 숨기는 버튼 보여주는 버튼 2개나 만들어야해??'

아니다 버튼하나로 끝낼 수 있다.

그 기능이 바로 toggle이벤트이다

 

 

예시먼저 보여주겠다.

toggle

$("#hacs").toggle();

 

 

이것을 걸어주게되면 id값이 hacs라는게 show가 되어있으면 hide가 되는거고, hide가 되어있으면 show를 해주는거다

이것도 상황에 따라 쓰이는곳이 다를 수 있으니 적절하게 활용해야한다.

 

 

 

그럼 저 hide와 show오른쪽에 ()는 무슨 역할을 수행할까??

바로 '속도'이다 여기에 들어갈 것은

fast normal slow가 있는데 직적 수행해 보면 알겠지만

slow를 걸경우 뭔가 빨려들어가듯이 느리게 사라지고

fast를 걸경우 순식간에 슥하고 사라지는것을 볼 수 있다.

이건 상황에 따라 적절히 사용하면 될 듯하다.

(참고로 디폴트 값은 normal이 걸려있다.)

$("#hacs").hide("slow");

 

 

 

fadeOut

$("#hacs").fadeOut();

 

 

fadeOut(반드시o를 대문자O로 해야함)이벤트는 말그대로 서서히 사라지는 이벤트이다

직접 수행해보면 잘 모를수도 있지만 fadeOut("slow");를 해보면 점점 희미해지면서 사라지는걸 볼 수 있다.(=opacity(투명도)가 점점 0으로 향하다가 hide가 된다=빈칸이 존재하지 않음)

 

fadeTo

$("#hacs").fadeTo("slow",0.5);

 

 

fadeTo는 말그대로 점차 사라진다 어디까지~ 라는 말이다

그렇기에 fadeTo("속도", 원하는 수치);를 걸어주게 된다면 원하는 수치까지 사라지게 되는것이다.

예시에 나온것처럼 0.5를 걸어주게 된다면 opacity가 0.5까지 투명해 진다 사라지진 않음(hide가 되지 않음으로 빈칸은 존재한다)

 

fadeToggle

$("#hacs").fadeToggle(500);

 

fade in out도 있으니 toggle도 당연 있다.

이 이벤트는 in이 되어있다면 out을 out이 되어있다면 in을 수행하는 toggle이벤트 이다

그다음으로 나오는 숫자는 사라지거나 나타나는 속도이다

속도는 밀리세컨드이기에 예시처럼 500이면 0.5초만에 사라지거나 사라진다.

 

 

slideUp

$("#hacs").slideUp();

 

slideDown

$("#hacs").slideDown();

 

slideToggle

$("#hacs").slideToggle();

 

 

slide이벤트는 마치 엘리베이터가 상하로 열리거나 닫히는것처럼 사라졌다 나왔다 하는 이벤트 이다(ppt할때 한번쯤은 써봤던 이벤트일것이다.)

up down toggle은 위에서 계속 설명했던

보이기 숨기기 보이기숨기기토글방식 이렇게 이다.(비슷해서 설명하기도 귀찮...)

 

 

 

이러한 이벤트 말고도 animate stop.. 등등 제이쿼리에서 제공하는 다양한 이벤트 들이 많다

그것들은 상황에 따라 찾아보면서 익히는게 더 효율적이다(너무나도 방대하게 많기때문에)

 

 

 

하지만 앞서 말한것들은 어떠한 이벤트를 걸어주지 원하는 상황에 스스로 수행시키기엔 어렵다.

그렇기에 특정 상황에 발동되게 하기 위해선 이벤트를 걸어줘야한다.

 

 

 

다음 파트에는 특정 상황에 발동되게 할 수 있는 '이벤트 핸들러'를 거는방법을 설명하겠다.

 

 

 

 

jQuery 기초 및 사용방법 part.1 $, #, 태그?

 

jQuery 기초 및 사용방법 part.3 이벤트 종류

 

jQuery 기초 및 사용방법 part.4 CSS vs Animate

[jQuery] 제이쿼리 기초 및 사용방법 part.5 text,append,prepend,before,after

 

학스의 개발일지

 

 

오류나 궁금하신점은
아래 댓글로 알려주시면 감사하겠습니다.