jQuery FadeIn efect changing image

Question

I have problem. I trying to change last image on div with new one by this code:

var rand = Math.floor(8*Math.random()+1);
$("#foto-"+ rand).fadeIn("slow", function() {
    $("#foto-"+ rand).html('<img style="position: relative;" height="100%" src="slides/'+ Math.floor(fotos*Math.random()+1) +'.jpg" />');
});

This code change image, but no effect displaying.

Answer 1

I don't think you can use fadeIn like that. You can use fadeIn to make an item visible, but not to make changes to the DOM. You should use animate for custom animations as I demonstrate here: http://jsfiddle.net/KMuN3/ .

However, in this situation, animate is probably overkill since you really just need to fade out and in. Just do this instead:

var rand = Math.floor(8*Math.random()+1);
$("#foto-"+ rand).fadeOut();
$("#foto-"+ rand).html('<img style="position: relative;" height="100%" src="slides/'+ Math.floor(fotos*Math.random()+1) +'.jpg" />');
$("#foto-"+ rand).fadeIn();

Answer 2

Try this:

var rand = Math.floor(8*Math.random()+1);
$("#foto-"+ rand).hide();
$("#foto-"+ rand).html('<img style="position: relative;" height="100%" src="slides/'+ Math.floor(fotos*Math.random()+1) +'.jpg" />');
$("#foto-"+ rand).fadeIn("slow");