fade 는 사전에서 찾으면 '흐릿한' 이라는 뜻이야.
('맛없는' 이라는 뜻도 있어..ㅎ 맛이 밍밍하다고 할 때 쓰는 것 같아.)
웹에서는 주로 배경이나 사진을 흐릿하게 표현할 때 주로 사용하는 표현이야.

자바스크립트에서는 함수까지는 만들지 않았지만 슬라이드쇼(1) 편에서 간단하게 공부해 보았어. 기억나?
http://yogibbs.kr/jsDemo/slideShow2-vanilla.html

제이쿼리에는 이 fade 효과를 간단하게 처리할 수 있는 함수가 기본으로 있으니 한 번 맛보고 가자구.
이 fade 효과는 메뉴나 콘텐츠의 내용 보다는 사진에 적용하는 경우가 많아.
우리도 사진에 fade 효과를 주어 볼거야.

...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
...
<button onclick="$('img').fadeOut(3000)">fadeOut</button>
<button onclick="$('img').fadeIn(3000)">fadeIn</button>
<button onclick="$('img').fadeToggle(3000)">fadeToggle</button>
<button onclick="$('img').fadeTo(3000, 0.5)">fadeTo 0.5</button>
<button onclick="$('img').fadeTo(3000, 1)">fadeTo 1</button>
<br><br>
<img src="roll1.jpg">
...

사용방법은 hide, show, slide 와 거의 똑같아.
fadeOut 은 흐릿하게 사라지는 것이고, fadeIn 은 등장, fadeToggle 은 토글작동이겠지?
또 뒤 괄호안의 숫자는 효과의 지속시간이야. (위 예제에서는 모두 3초로 했어)

그런데 다른 함수들과 달리 fade 에는 fadeTo( ) 라는 함수가 하나 더 있어.
이것은 어디 까지 흐릿하게 할 때 사용해. 사용방법은...
시간은 다른 함수와 같고 투명도는 0 ~ 1 사이의 소수점 숫자야.
0 은 완전히 투명해서 안보이는 것이고, 1 은 완전 불투명이야.
위의 예제에서 fadeTo(3000, 0.5) 는 50% 까지만 투명하게 하라는 뜻이겠지?
또 fadeTo(3000, 1) 이면 100% 다 보여 주는 것이니 완전 불투명일거야.

아래 데모 페이지로 한 번 확인해 보자구..

http://yogibbs.kr/jsDemo/fade-jquery.html