[SOLUCIONADO] (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.

[alexg88]

No entiendo cual es tu problema la verdad, pero deberías cambiar algunas cosas.

No puedes utilizar un id varias veces, por debe ser único. Además, no tiene sentido usarlo en el código (ya lo estás ocultando con fadeOut).

Código Javascript:

<script>
    $(function()
   {        
            var target = null;
            $(".img_hover a").hover(
            function(e)
            { 
                target = $(this);
                $(target[0].firstElementChild).slideDown(200);
            }, 
             function()
            { 
                $(target[0].firstElementChild).fadeOut(200);
            });
    });
</script>
 

Código HTML:

<section> 
            <article class="img_hover">
                <a href="#">
                <div>
                    <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>
                    <p>QVEF!</p>
                    <span class="asd">más información</span>                
                </div>
                <img src="img/qvef.jpg" alt="QVEF">
                </a>
            </article>       
       </section>
 

[campos22ale]

Gracias alexg88!! Tenis razón en cuanto a tus comentarios y me solucionaste el problema.