jQuery는 요소를 페이드하여 효과를 더욱 생생하게 만듭니다_jquery

보다 생생한 효과를 얻으려면 요소를 페이드 아웃하거나 인할 수 있습니다. 두 경우 모두 시간이 지남에 따라 요소의 투명도를 변경하기만 하면 됩니다. jQuery는 페이드 인 및 페이드 아웃과 관련된 3가지 기능을 제공합니다.

·fadeIn()은 숨겨진 요소를 페이드 인하여 표시합니다. 먼저 요소가 차지하는 공간이 페이지에 나타납니다(이는 페이지의 다른 요소가 멀리 이동됨을 의미할 수 있음). 그런 다음 요소가 점차 표시됩니다. 요소가 이미 페이지에 표시되어 있는 경우 이 기능은 아무 효과가 없습니다. 속도 값이 제공되지 않으면 요소는 "일반" 설정(400밀리초)을 사용하여 페이드 인됩니다.

·fadeOut()은 눈에 보이는 요소를 유령처럼 사라지게 하여 숨깁니다. 요소가 이미 페이지에 숨겨져 있는 경우 이 함수는 fadeIn() 함수와 마찬가지로 아무런 효과가 없습니다. 속도 값이 제공되지 않으면 요소가 400밀리초에 페이드 아웃됩니다.

·fadeToggle()은 페이드인 및 페이드아웃 효과를 결합합니다. 요소가 현재 숨겨져 있는 경우에는 사라집니다. 현재 표시되어 있으면 해당 요소는 보기에서 사라집니다. 이 기능을 사용하여 도구 설명을 페이지에 표시하거나 페이지에서 사라지게 할 수 있습니다. 예를 들어 "instructions"라는 단어를 표시하는 버튼이 있다고 가정해 보겠습니다. 방문자가 버튼을 클릭하면 설명이 포함된 div가 보기에 사라집니다. 버튼을 다시 클릭하면 설명이 보기에서 사라집니다. 프롬프트 상자가 0.5초마다 페이드 인 또는 페이드 아웃되도록 하려면 다음과 같은 코드를 작성하면 됩니다.

$('#button').click(function(){
$('#instructions').fadeToggle(500);
})；//end click

·fadeTo() 작동 방식은 다른 두 가지 효과 함수와 약간 다릅니다. 이미지를 특정 투명도로 페이드합니다. 예를 들어 이미지를 반투명하게 페이드할 수 있습니다. 다른 효과와 달리 속도 값을 제공해야 합니다. 또한 요소의 투명도를 나타내기 위해 0에서 1 사이의 값이 제공됩니다. 예를 들어 모든 단락을 75% 투명도로 페이드하려면 다음과 같이 코드를 작성할 수 있습니다.

$('p').fadeTo('normal'，.75);

이 기능은 요소의 표시 여부에 관계없이 요소의 투명도를 변경합니다. 예를 들어 현재 숨겨져 있는 요소를 투명도 50%로 페이드한다고 가정해 보겠습니다. 그런 다음 show() 또는 fadeIn()을 사용하여 요소를 표시하면 50% 투명도로 표시됩니다. 마찬가지로 반투명 요소를 숨겼다가 표시하면 투명도 설정이 복원됩니다.