Question

When i use this script it ends up with the red one because that is the last one in line.
So somehow I need to add z-index:+1 ?

jsfiddle.net/fourroses666/MCDw7

Anyone who can help me with this?

Answer 1

This is not an answer to your question, but might be the solution you are seeking. So if you want continous fading of images. You should have two images, the background one having its opacity set to 1, the foreground one fading from 0 to 1. After it reached 1, you place the foreground image to the background, and add a new image into the foreground with opacity 0…

Here is it on JSFiddle

JS Code:

function changeImg(){
    var img1 = document.getElementById("1");
    var img2 = document.getElementById("2");
    img1.src = img2.src;
    $("#2").css({ opacity: 0 });
    var randomNumber = Math.floor(Math.random()*(16*16*16 - 1));
    var randomStr = randomNumber.toString(16);
    img2.src = "http://dummyimage.com/50/" + randomStr + "/" + randomStr;
    $('#2').delay(200).animate({opacity:1},150, function(){
            changeImg();
    });

}

$(document).ready(function(){   
    changeImg();
});​

HTML Code:

<div id="container">
    <img id="1" src="http://dummyimage.com/50/000/000" />
    <img id="2"/>    
</div>​​​​​

CSS Code:

div img{
    position:absolute;
    width: 50px;
    opacity:1;
}