Fading Bild Hintergrund mit gestreckten BG in IE8 (Javascript und CSS)

Question

Ich muss ein verblassendes Hintergrundbild erstellen, das sich ausdehnt, um den Browser zu füllen. Der folgende Code funktioniert perfekt in jedem einzelnen Browser außer IE8 und darunter. Das IE8 Problem ist, dass ich es verblassen kann, aber nicht strecken oder dehnen, aber nicht verblassen - nicht beides gleichzeitig.

DER JAVASCRIPT

$(document).ready(function(){ 

    var imgArr = new Array(// relative paths of images 
     'images/bg01.jpg', 
     'images/bg02.jpg', 
     'images/bg03.jpg', 
     'images/bg04.jpg', 
     'images/bg05.jpg' 
    ); 


var preloadArr = new Array(); 
var i; 


/* preload images */ 
for(i=0; i < imgArr.length; i++){ 
    preloadArr[i] = new Image(); 
    preloadArr[i].src = imgArr[i]; 
} 

var currImg = 0; 
changeImg(); 
var intID = setInterval(changeImg, 7500); 

/* image rotator */ 
function changeImg(){ 
$('#bgFade').animate({opacity: 0}, 1000, function(){ 
$(this).css({ 
    'background':'url(' + preloadArr[currImg++%preloadArr.length].src +') center 49px', 
    '-webkit-background-size':'cover', 
    '-moz-background-size':'cover', 
    '-o-background-size':'cover', 
    'background-size':'cover', 
    'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ preloadArr[currImg++%preloadArr.length].src +'\', sizingMethod=\'scale\'' 
    }); 
}).animate({opacity: 1}, 1000); 
} 

}); 

Hier ist die Linie, die ich hinzugefügt, um es in IE8 (und unten) zu machen strecken, aber es bricht die Fading-Funktionalität. Es wäre toll, wenn IE8 "background-size" unterstützt, tut es aber nicht.

'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ preloadArr[currImg++%preloadArr.length].src +'\', sizingMethod=\'scale\'' 

DER CSS/HTML

#bgFade { 
    position:fixed; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    z-index:-1; 
} 

<div id="bgFade"></div> 

Ich hoffe, es gibt eine Lösung sowohl Strecke ist und die Hintergrundbilder in IE8 verblassen. Wenn die Lösung nur in IE8 aber nicht in IE7 oder darunter funktioniert, ist das in Ordnung. IE8 und höher ist meine einzige Sorge im Moment. Danke im Voraus!

Answer 1

Von was ich sehen kann, verwenden Sie die Hintergrund-Eigenschaft auf einem HTML-Element. Was, wenn Sie stattdessen versuchen, ein Bildelement zu verwenden und es einfach hinter Ihren Inhalt zu legen. Ich würde denken, dass Sie in der Lage sein sollten, nur Breite und Höhe einzustellen, kein Problem (sogar in IE8) und dann jQuery's .fade() verwenden oder die Deckkraft animieren.

Answer 2

Dieser Filterwert-String sieht nicht ganz richtig aus.

'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ preloadArr[currImg++%preloadArr.length].src +'\', sizingMethod=\'scale\'' 

Versuchen:

'filter':"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + preloadArr[currImg++%preloadArr.length].src + "'), sizingMethod='scale'"