JQuery, comment ajouter la fonction fadeIn

Bonjour à tous !

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

$(document).ready(function (){

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

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

$(function(){ 
$("#blanche").delay(700).animate({"left":"+=771px"},1200) ;
	});
	
$(function(){ 
$("#cask_finish").delay(900).animate({"left":"+=661px"},1100) ;
	});

$(function(){ 
$("#private_collection").delay(1100).animate({"left":"+=554px"},1000) ;
	});

$(function(){ 
$("#classique").delay(1300).animate({"left":"+=368px"},900) ;
	});
	
$(function(){ 
$("#premium").delay(1500).animate({"left":"+=186px"},800) ;
	});
	
});

Jusqu'ici tout va bien.

J'aimerai que ces images apparaissent au fur et a mesure via la propriété .fadeIn.

J'ai trouvé cette fonction :

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

mon code html

 <div id="mignonettes"><img src="images/mignionnette.png" alt="les mignonettes" class="c"/><a href="armagnacs/mignonettes.html">Les Mini</a></div>
    <div id="ed_speciales"><img src="images/edition_speciale.png" alt="les editions sépciales" class="c" /><p><a href="armagnacs/editions-speciales.html">Editions <br />Speciales</a></p></div>
    <div id="carafes"><img src="images/carafes.png" alt="les carafes" class="c"/><p><a href="armagnacs/carafes.html">Les Carafes</a></p></div>
    <div id="blanche"><img src="images/blanche.png" alt="la blanche" class="c"/><p><a href="armagnacs/blanche.html">La Blanche</a></p></div>
    <div id="cask_finish"><img src="images/cask_finish.png" alt="cask finish" class="c"/><p><a href="armagnacs/cask-finish.html">Cask Finish</a></p></div>
    <div id="private_collection"><img src="images/private_collection.png" alt="private collection" class="c" /><p><a href="armagnacs/private-collection.html">Private<br /> Collection</a></p></div>
    <div id="classique"><img src="images/classique.png" alt="classique" class="c" /><p><a href="armagnacs/classique.html">Classique</a></p></div>
    <div id="premium"><img src="images/premium.png" alt="premium" class="c"/><p><a href="armagnacs/premium.html">Premium</a></p></div>
    </div>

elle marche très bien mais les image apparaissent, certes avec progressivement l'opacité de 0 a 100%, mais toutes en même temps, or je souhaiterai que le fadeIn s'applique même moment que .animate(), c'est a dire, au moment ou l'image commence à aller de gauche a droite.

Je ne sais pas si je suis très claire ...

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 comme j'ai fait.

j'ai essayé avec setInterval mais je n'ai pas réussi ...

Merci de votre précieuse réponse !