Problema con Animacion jquery

[gabo181]

Hola, estoy tratando de hacer una animación con jquery, pero ando un poco perdido.
Lo que quiero hacer es tomar todos los elementos tipo imagen que se encuentran en un div y animarlos con fadeIn y FadeOut. El problema que tengo es que no pasa de la primera imagen.
el codigo es el siguiente:

Código HTML:

 <div id="animacion">
                   <img src="Imagenes/Tours1.jpg" width="968" height="262" id="foto1" alt="tours" />
                   <img src="Imagenes/Tours2.jpg" width="968" height="262" id="foto2" alt="tours"/>
                   <img src="Imagenes/playa1.jpg" width="968" height="262" id="foto3" alt="tours"/>
                   <img src="Imagenes/cancun2.jpg" width="968" height="262" id="foto4" alt="cancun"/>

                   


                                                         
                </div> 

y el javascript:

Código:

$(document).ready(function(){
    var duracionefecto=(1000);
    var tiempoInicioAnimacion=(200);
     var objetivo=document.getElementById("animacion").getElementsByTagName("img");
    
    function animar(){
    
    alert('hay '+objetivo.length+'imagenes');

 
        for(var i=0;i<objetivo.length;i++){
        
          $(objetivo[i]).fadeIn(duracionefecto);
          $(objetivo[i]).fadeOut(duracionefecto);
    }

}

setTimeout(function(){
    animar();
}, tiempoInicioAnimacion);


});

Desde ya Gracias