Ajouter un .fadeIn avec .delay pour chaque images

Bonjour à tous,

Après maintes recherches à travers le monde merveilleux de web je me permet de poster mon problème :

J'ai une animation avec 8 images qui vont de gauche à droite, chacune décalées de 0.2s

Jusqu'ici tout va bien.

J'aimerai que ces images apparaissent au fur et a mesure via la propriété .fadeIn
et c'est a partir de là que çà ne fonctionne plus.

J'ai tout d'abord essayé avec cette fonction :

$(document).ready(function (){ 
   $("img.c").load(function(){ 
        $(this).fadeOut(0, function(){ 
            $(this).fadeIn(2000); 
        }); 
    }); 
});

Mais les images apparaissent tout en même temps (logique)

Voici mon code :

<script type='text/javascript'>
$(document).ready(function (){


$(function(){
	$("#mignonettes").animate({"left":"+=1226px"}, 1500);
	});

$(function(){		
	$("#mignonettes").load(function(){
		$(this).fadeOut(0, function(){
			$(this).fadeIn(400);
			});
		});
	});

$(function(){ 
$("#carafes").delay(300).animate({"left":"+=1047px"},1400) ;
$(function(){		
	$("#carafes").load(function(){
		$(this).fadeOut(0, function(){
			$(this).fadeIn(400);
			});
		});
	});
	
$(function(){ 
$("#ed_speciales").delay(500).animate({"left":"+=873px"},1300) ;
$(function(){		
	$("#ed_speciales").load(function(){
		$(this).fadeOut(0, function(){
			$(this).fadeIn(400);
			});
		});
	});

$(function(){ 
$("#blanche").delay(700).animate({"left":"+=771px"},1200) ;
$(function(){		
	$("#blanche").load(function(){
		$(this).fadeOut(0, function(){
			$(this).fadeIn(400);
			});
		});
	});

$(function(){ 
$("#cask_finish").delay(900).animate({"left":"+=661px"},1100) ;
$(function(){		
	$("#cask_finish").load(function(){
		$(this).fadeOut(0, function(){
			$(this).fadeIn(400);
			});
		});
	});

$(function(){ 
$("#private_collection").delay(1100).animate({"left":"+=554px"},1000) ;
$(function(){		
	$("#private_collection").load(function(){
		$(this).fadeOut(0, function(){
			$(this).fadeIn(400);
			});
		});
	});

$(function(){ 
$("#classique").delay(1300).animate({"left":"+=368px"},900) ;
$(function(){		
	$("#classique").load(function(){
		$(this).fadeOut(0, function(){
			$(this).fadeIn(400);
			});
		});
	});

$(function(){ 
$("#premium").delay(1500).animate({"left":"+=186px"},800) ;
$(function(){		
	$("#premium").load(function(){
		$(this).fadeOut(0, function(){
			$(this).fadeIn(400);
			});
		});
	});
	
	
});

</script>

et le html

    <div id="mignonettes"><img src="images/mignionnette.png" alt="les mignonettes" class="c"/></div>
    <div id="carafes"><img src="images/carafes.png" alt="les carafes" class="c"/></div>
    <div id="ed_speciales"><img src="images/edition_speciale.png" alt="les editions sépciales" class="c" /></div>
    <div id="blanche"><img src="images/blanche.png" alt="la blanche" class="c"/></div>
    <div id="cask_finish"><img src="images/cask_finish.png" alt="cask finish" class="c"/></div>
    <div id="private_collection"><img src="images/private_collection.png" alt="private collection" class="c" /></div>
    <div id="classique"><img src="images/classique.png" alt="classique" class="c" /></div>
    <div id="premium"><img src="images/premium.png" alt="premium" class="c"/></div>

Voilà cela fait depuis hier que je bloque dessus, je viens donc solliciter votre précieuse aide !

D'autre part, j'aimerai savoir s'il existe un moyen un peu moins fastidieux de faire partir les images en décalé dans le temps au lieu de les appeler toutes une par une ...

Merci de votre réponse !!!