jquery中的背景圖像淡入淡出

我試着在jQuery和CSS中做淡入淡出的背景，這是我的代碼 - 但它不工作。有任何想法嗎？jquery中的背景圖像淡入淡出

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); 
});

來源

2013-05-06 Dawid Górecki

你意識到你不能真正動畫背景圖像不透明度，但只有元素本身。 – adeneo 2013-05-06 21:43:15

[用jQuery淡化背景圖片]可能的重複（http://stackoverflow.com/questions/1690869/fading-in-background-image-with-jquery） – Blazemonger 2013-05-06 21:43:30

您可以爲背景顏色設置動畫，但不是背景圖像，我也把頭撞過這個牆。

見這裏 - Fade in new background images on scroll

正如在回答我的問題，你需要使用<img>的具有負的z-index和褪色那些英寸

這是我如何做它 -

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')}; 
});

來源

2013-05-06 23:37:49 apaul

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);

這一項必須工作我嘗試這對格

來源

2013-12-10 00:13:17 ique

jquery中的背景圖像淡入淡出

回答

相關問題