배경 이미지 jquery에서 페이드 아웃

Question

jQuery와 CSS에서 페이드 배경을 사용하려고 노력하고 있습니다. 이것이 내 코드입니다.하지만 작동하지 않습니다. 어떤 아이디어?

var images = ['bg.jpg', '_4.jpg', '_5.jpg', '_6.jpg']; 
var i = 0; 

setInterval(function(){ 
$('body').animate({opacity: 0}, 'slow', function() { 
     $(this) 
      .css('background-image', function() { 
     if (i >= images.length) { 
      i=0; 
     } 
     return 'url(' + images[i++] + ')'; 
    }); 
      .animate({opacity: 1}); 
    }); 
}, 1000); 
}); 

Answer 1

배경색은 애니메이션으로 만들 수 있지만 배경 이미지는 애니메이션으로 만들 수 없습니다.이 벽에 머리를 맞 춥니 다.

는 음의 Z-인덱스 <img> 년대를 사용하여 사람들을 퇴색 할 필요가 내 질문에 대한 대답에서와 마찬가지로 여기 - Fade in new background images on scroll

참조하십시오.

이 나는 ​​IT-에게

을 어떻게했는지

CSS

#img1, #img2, #img3, #img4 { 
    width:100%; 
    height:100%; 
    display:none; 
    position:fixed; 
    z-index:-1; 
} 

jQuery를

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 150) { 
     $('#img2').fadeIn(); 
    } 
    else {$('#img2').fadeOut('fast')}; 

    if (y > 300) { 
     $('#img3').fadeIn(); 
    } 
    else {$('#img3').fadeOut('fast')}; 

    if (y > 450) { 
     $('#img4').fadeIn(); 
    } 
    else {$('#img4').fadeOut('fast')}; 
}); 

Answer 2

setInterval(function(){ 
      $('.light').animate({opacity: 0}, 4000, function() { 
       $('.light').css({background:'url(./images/' + images[i++] + ') no-repeat top center'}).animate({opacity: 1},4000); 
       if (i >= images.length) { i=0; } 
      }); 
     }, 4000); 

이 하나 당신은 당신이 정말로 배경 이미지의 불투명도를 애니메이션 할 수 실현,하지만 요소 자체 내가 DIV