Firefox no transition when fading back in an image - html

Question

I made a nice transition effect when switching between images, it sets the opacity to 0 (With a transition of all .5s) then .5s later (Via setTimeout) the src of the image is changed and it should fade back in.
It works fine on Chrome and IE but on firefox the image fades out and then instead of fading back to opacity:1 it just jumps straight to it.
Here is my code
Javascript:
AddEventListener(window, 'load', function () {
window.FadeinTime = 500;
var LargeImageDiv = document.getElementById('LargeImage');
window.LargeImage = LargeImageDiv.childNodes[1];
var LargeImageCaption = LargeImageDiv.childNodes[3];
var SlideText = ['Videography', 'Photography', 'Walkthroughs', 'Fine Art'];
window.Images = []; //Some image links
LargeImage.src = '/Resources/Home/' + window.Images[0];
window.AutoSlide = setInterval(function () {
var SlideNo = parseInt(LargeImage.getAttribute('data-slide')) + 1;
var SlideTextNo = parseInt(LargeImage.getAttribute('data-slideText')) + 1;
if (SlideNo == Images.length) SlideNo = 0;
if (SlideTextNo == SlideText.length) SlideTextNo = 0;
LargeImage.setAttribute('data-slide', SlideNo.toString());
LargeImage.setAttribute('data-slideText', SlideTextNo.toString());
LargeImageDiv.setAttribute('style', '-khtml-opacity:0;-moz-opacity:0;-ms-filter: alpha(opacity=0);-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter: alpha(opacity=0);opacity:0;');
setTimeout(function () {
LargeImage.src = '/Resources/Home/' + Images[SlideNo];
LargeImageCaption.innerHTML = SlideText[SlideTextNo];
LargeImageDiv.removeAttribute('style');
}, window.FadeinTime)
}, 2500)
});
HTML:
<div id="LargeImage" class='NoSelect' onclick='if(event.target.nodeName == "BUTTON") return; var u = this.childNodes[3].innerHTML; window.location=(u=="Videography"||u=="Walkthroughs"?"/Videos/View/"+u:"/Pictures/View/"+u);'>
<img src="" data-slide='0' data-slideText='0'/>
<pre class='Caption'>Videography</pre>
</div>
CSS:
body > div#Content > div#LargeImage {
cursor:pointer;
max-height:490px;
min-height:300px;
width:100%;
overflow:hidden;
margin:0 auto;
position:relative;
-moz-transition:.5s;
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s;
}
body > div#Content > div#LargeImage > button {
position:absolute;
bottom:5px;
right:5px;
;
}
body > div#Content > div#LargeImage > img {
width:100%;
margin-top:-10%;
}
body > div#Content > div#LargeImage > pre {
height:50px;
font-size:80px;
}