(AYUDA) No puedo hacer que funcione el "hover" de forma correcta

[campos22ale]

Hola gente! soy nuevo en el foro.
Quería ver si pueden ayudar con mi codigo javascript con la libreria jQuery.
Es el primer codigo que hago en js.

Logré que al poner el mouse y sacarlo sobre una imagen salga una capa arriba con un texto arriba... algo que se encuentra hecho pero yo quería intentar hacer algo sencillo por mi cuenta para aprender.

El problema es que funciona bien en todos las imágenes excepto la primera que encuentra en el codigo... medio que se traba la animacion si paso de una a otra.
en este caso la imagen que falla es 'quintaelrefugio.jpg'

Les dejo el código JS:

Código Javascript:

<script>
    $(function(){
            var caja= $("#caja");
            var target = null;
            $(".img_hover a").hover(function(e){ ////efecto del evento mousehover
                target = $(this);
            ****$(target[0].firstElementChild).slideDown(200);
            }, function(){ //efecto del evento mouseout
                $(target[0].firstElementChild).fadeOut(200, function(){
                    caja.css("display","none");
                });
            });
    });
</script>
 

Código HTML:

<section> 
            <article class="img_hover">
                <a href="#">
                <div id="caja">
                    <p>Quinta El Refugio</p>
                    <span class="asd">más información</span>                
                </div>
                <img src="img/quintaelrefugio.jpg" alt="Quinta el Refufio">
                </a>
            </article> 
            
            <article class="img_hover">
                <a href="#">
              <div id="caja">
                    <p>QVEF!</p>
                    <span class="asd">más información</span>                
                </div>
                <img src="img/qvef.jpg" alt="QVEF">
                </a>
            </article>       
       </section>
 

Espero que se entienda y me puedan ayudar. Gracias.