jQuery에서 배경 이미지를 페이드할 수 없나요? 솔루션 잠금 해제

jQuery에서 배경 이미지를 페이드할 수 없나요? 시도해 보세요

jQuery를 사용하여 배경 이미지를 흐리게 하려고 시도하는 동안 다음을 포함한 여러 접근 방식이 성공하지 못한 것으로 나타났습니다.

var x = 0;

while (true) {
    /* change background-image of #slide using some variation
    of animate or fadeIn/fadeOut with or without setTimeout */
    x++;
}

해결책:

이 문제의 핵심은 jQuery가 배경 이미지를 직접 페이드할 수 없다는 사실에 있습니다. 이 문제를 해결하려면 태그를 사용하여 이미지를 표현하고 처음에는 display: none;을 사용하여 이미지를 숨깁니다. 위치를 절대값으로 설정하고 Z-인덱스를 -1로 설정하여 배경 동작을 모방하여 다른 모든 요소 뒤에 나타나도록 합니다.

이 효과를 얻는 방법의 예는 다음과 같습니다.

HTML:

<img  src="/static/imghwm/default1.png" data-src=".." class="lazy" alt="jQuery에서 배경 이미지를 페이드할 수 없나요? 솔루션 잠금 해제" >
<img  src="/static/imghwm/default1.png" data-src=".." class="lazy" alt="jQuery에서 배경 이미지를 페이드할 수 없나요? 솔루션 잠금 해제" >

CSS:

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

jQuery:

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    });
}
test();

A 라이브 데모는 http://jsfiddle.net/RyGKV/에서 볼 수 있습니다.

위 내용은 jQuery에서 배경 이미지를 페이드할 수 없나요? 솔루션 잠금 해제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!