JavaScript를 사용하여 배경 이미지 페이딩

배경 색상 페이딩과 달리 배경 이미지 페이딩은 jQuery에서 간단한 작업이 아닙니다. 이는 배경 이미지가 DOM의 요소가 아니라 CSS 속성으로 처리되기 때문입니다.

그러나 영리한 해결 방법은 절대 위치 지정 및 음수 Z-인덱스와 함께 태그를 사용하여 배경 이미지의 환상. 기본적으로 이러한 이미지를 숨기고 jQuery를 사용하여 페이드 인 및 페이드 아웃함으로써 배경 이미지 페이드 효과를 시뮬레이션할 수 있습니다.

이를 수행하는 방법은 단계별로 다음과 같습니다.

1. HTML에 태그를 추가하세요.

흐리게 하려는 각 배경 이미지에 태그를 하나씩 추가하세요. 절대적으로 배치하고 음수 Z-색인을 지정하여 다른 모든 요소 뒤에 배치합니다.

img {
  position: absolute;
  z-index: -1;
  display: none;
}

2. jQuery 코드 작성:

jQuery의 Each() 메서드를 사용하여 태그를 반복하고 순서대로 페이드 인 및 페이드 아웃합니다. 예는 다음과 같습니다.

function fadeImages() {
  $("img").each(function(index) {
    $(this)
      .hide()
      .delay(3000 * index) // delay each image by 3 seconds
      .fadeIn(3000)
      .fadeOut()
  });
}

3. 함수 호출:

fadeImages() 함수를 호출하여 페이딩 프로세스를 시작합니다.

실제 예제를 보려면 http://jsfiddle.net/에서 라이브 데모를 확인하세요. RyGKV/