無法讓背景圖像淡入？

我以前使用過這個代碼來表達各種其他想法，但是我從來沒有在動畫之外做過淡入淡出，所以我希望圖片在它們被改變時淡入淡出，這可能在這段代碼中嗎？或者我將不得不尋找另一種方法？你看到淡入淡出的地方就是我現在擁有它的地方，但淡入淡出似乎不起作用。我試着將時間與沒有運氣的間隔匹配。無法讓背景圖像淡入？

$(function() { // DOCUMENT ready shorthand 
    var cnt=0, bg; 
    var $body = $('body'); 
    var arr = ['images/01.jpg','images/02.jpg','images/03.jpg','images/04.jpg','images/05.jpg','images/06.jpg','images/07.jpg']; 

    var bgrotater = setInterval(function() { 
     if (cnt==7) cnt=0; 
     bg = 'url("' + arr[cnt] + '")'; 
     cnt++; 
     $body.css('background-image', bg).fadeIn('fast'); 
    }, 5000); 
});

來源

2014-10-19 コードバリノ

你想在''褪色，但它第一次淡入 – charlietfl 2014-10-19 13:56:30

你怎麼能淡入一些東西，已經可見後總是在你的代碼可見..？或者你計劃隱藏''本身..？！ – 2014-10-19 14:05:21

不，我想要一個淡入淡出的過渡效果的圖像將出現未來對不起，我吸了，我是新來的JavaScript仍然。 – 2014-10-19 21:30:40

如果有人在將來會有這個問題，那麼你要做的就是像CSS那樣在CSS中添加轉換。另請注意它說過渡的部分。

body { 
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; 
background-color: #666; 
background-image: url(images/01.jpg); 
background-size: 100% 150%; 
background-attachment:fixed; 
margin: 0; 
padding: 0; 
color: #FFF; 
transition: background 1.5s linear;

}

來源

2014-10-19 21:40:12

您還可以通過在body上添加一個div來模擬背景：'position：absolute; top：0px; bottom：0px; left：0px; right：0px; z-index：-1; background：url（'yourbg。 PNG'）;'。然後你可以使用JQuery淡入淡出。 – GramThanos 2014-10-19 22:02:18

是的，當我想起過渡效果的時候，我正要這樣做。但這樣少用代碼，所以我堅持這一個，但謝謝你的答案：D – 2014-10-19 22:03:37

無法讓背景圖像淡入？

回答

相關問題