背景圖像與jQuery

衰落我有一系列的圖像，循環通過幻燈片作爲CSS background性質。下面的代碼也應該讓他們淡入淡出通過jQuery的fadeIn財產，但由於某些原因，它不褪色，根本改變來代替。有任何想法嗎？背景圖像與jQuery

這是一個從未解決的評論跟進。小提琴這裏：http://jsfiddle.net/5fVZ7/6/

var images=new Array(); 
images[0]='http://s29.postimg.org/912bsm0mf/dataarancio.jpg'; 
images[1]='http://s27.postimg.org/y6tl17eb7/velocita.jpg'; 
var nextimage=0; 
doSlideshow(); 

function doSlideshow(){ 
    if(nextimage>=images.length){nextimage=0;} 
    $('.bkg') 
    .css('background-image','url("'+images[nextimage++]+'")') 
    .fadeIn(500,function(){ 
    setTimeout(doSlideshow,4000); 
}); 
}

來源

2015-10-28 Tom

你爲什麼要推倒重來？有大量的例子在線，甚至在stackoverflow實現同樣的事情。 –

可能的重複http://stackoverflow.com/questions/30388118/trying-to-make-multiple-background-images-cycle-through-a-slideshow-with-css-and – guest271314

@MikeRoss如果我找到了工作解決方案符合我的準則我會用它，謝謝。這個代碼實際上比我發現實現類似結果的其他代碼簡單得多。 – Tom

答案是包裹if聲明和css屬性更改在fadeOut溫控功能，像這樣：

var images=new Array(); 
images[0]='http://s29.postimg.org/912bsm0mf/dataarancio.jpg'; 
images[1]='http://s27.postimg.org/y6tl17eb7/velocita.jpg'; 
var nextimage=0; 
doSlideshow(); 

function doSlideshow(){ 
    $('.bkg').fadeOut(500,function(){ 
    if(nextimage>=images.length){nextimage=0;} 
    $('.bkg').css('background-image','url("'+images[nextimage++]+'")'); 
    }); 

    $('.bkg').fadeIn(500,function(){ 
    setTimeout(doSlideshow,4000); 
    }); 
}

我覺得這段代碼是比一般人我發現，更簡單，更有效做同樣的事情，包括評論中發佈的重複問題的答案。

來源

2015-10-29 00:58:56 Tom

.fadein改變元素的透明度，但你正在改變的背景圖像。動畫只能在數值行事，有沒有辦法讓瀏覽器計算的背景圖像是圖像1和圖像2「之間」。相反，嘗試將圖像疊加爲單獨的html元素，並使用fadein按順序控制其可見性。

來源

2015-10-29 00:51:35 jsostrich

背景圖像與jQuery

回答

相關問題