jQuery 보이기 / 감추기 method

🍫 보이기 / 감추기 이펙트

• show() : 선택요소 보이기
• hide() : 선택요소 감추기
• toggle() : 선택요소 보이기 / 감추기
• slideDown() : 선택요소 서서히 보이기
• slideUp() : 선택요소 서서히 감추기
• slideToggle() : 선택요소 서서히 보이기 / 감추기
• fadeIn() : 선택요소 페이드로 나타나게 하기
• fadeOut() : 선택요소 페이드로 사라지게 하기
• fadeToggle() : 선택요소 페이드로 나타내기 / 사라지게 하기
  ( Toggle은 하나의 버튼이 두가지 기능을 가지고 있는 것 - ON / OFF 스위치 같은 개념)

ex

script/custom.js

<script>
  
  $('.btn').click(function() {
     $('div').slideDown();
  })
  
   html 내에 있는'.btn'이라는 클래스를 가지고 있는 요소를 클릭하면,
   'div'태그를 서서히 보여줘라.
  
</script>

이펙트 자체를 사용하기 복잡하고 그런것은 아니다.
그냥 jQuery 표현 규칙만 잘 알고 있으면 쉽다. (그럴려고 jQuery가 존재하는 거긴 하지만..)

🍫 이펙트 method의 괄호() 는 뭐지?

위에 열거한 보이기 / 감추기 이펙트 뒤에 붙어있는 괄호 ()
필수사항은 아니지만, 이 괄호안에 이펙트의 속도를 지정 가능하다.

• 이펙트의 속도 지정 가능
• 'fast' , 'slow' 혹은 숫자로 표현
• 숫자는 밀리세컨드 단위임. (1초 = 1000밀리초)
• 지정안하면 기본값으로 작동

ex

script/custom.js

<script>
  
  $('.btn').click(function() {
     $('div').fadeIn(3000);
  })
  
   html 내에 있는'.btn'이라는 클래스를 가지고 있는 요소를 클릭하면,
   'div'태그를 3000밀리세컨드(=3초)에 걸쳐 서서히 나타나게 해랴.
  
</script>