숨기기 / 표시하기

• 속도 지정 가능 : slow, fast, millisecond
• 콜백 함수 지정 가능

hide()

• $(selector).hide(speed, callback);
• HTML 요소 숨기기
• display : none으로 바뀜
  

show()

• $(selector).show(speed, callback);
• HTML 요소 표시하기
• display : none 속성 지워짐
  

toggle()

• $(selector).toggle(speed, callback);
• HTML 요소 숨기기&표시하기

fadeIn()

• $(selector).fadeIn(speed, callback);
• 숨겨진 요소를 불투명 효과를 주면서 보여줌
• display : none 속성이 지워짐

$("div").fadeIn();
$("div").fadeIn(1000);
$("div").fadeIn("slow");

fadeOut()

• $(selector).fadeOut(speed, callback);
• 보이는 요소를 불투명 효과를 주면서 숨김
• display : none 으로 바뀜

fadeToggle()

• $(selector).fadeToggle(speed, callback);
• fadeIn과 fadeOut을 번갈아 수행

fadeTo

• $(selector).fadeTo(speed, opacity, callback);
• 설정된 불투명도로 fadeIn 또는 fadeOut
• 투명도(opacity) : 0~1
• 숨겨진 요소는 fadeIn으로
• 보이는 요소는 fadeOut으로 수행

slideDown()

• $(selector).slideDown(speed, callback);
• display : none 속성이 지워짐

slideUp()

• $(selector).slideUp(speed, callback);
• display : none 으로 바뀜

slideToggle()

• $(selector).slideToggle(speed, callback);

참고
https://m.blog.naver.com/PostView.nhn?blogId=ksh81850&logNo=220320557924&proxyReferer=https:%2F%2Fwww.google.com%2F

animate()

• $(selector).animate({params}, speed,callback);
• {params} 으로 애니메이션 할 css속성 정의
  ex. left 250 도달할때까지 div오른쪽으로 이동
  {left: '250px', height: '+=150px'}

콜백함수와 체이닝

callback함수

• 함수 안에서 선언된 함수
  다른 함수의 인자로써 이용되는 함수
• 현재 작업(효과)가 완료된 후 결과값을 parameter로 넘겨받아 실행됨

체이닝

• 메서드가 객체를 반환하게 되면,
• 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출

$("p").css("color","red").slideUp(),slideDown();

참고
[TUTORIALS] > [JavaScript] > [Learn jQuery] > [jQuery
Effects] > [jQuery Hide/Show] ~ [jQuery Chaining]
https://www.w3schools.com/jquery/jquery_hide_show.asp
https://www.w3schools.com/jquery/jquery_fade.asp
https://www.w3schools.com/jquery/jquery_slide.asp
https://www.w3schools.com/jquery/jquery_animate.asp
https://www.w3schools.com/jquery/jquery_stop.asp
https://www.w3schools.com/jquery/jquery_callback.asp
https://www.w3schools.com/jquery/jquery_chaining.asp
[TUTORIALS] > [JavaScript] > [Learn jQuery] > [jQuery
References] > [jQuery Effects]
https://www.w3schools.com/jquery/jquery_ref_effects.asp