No hace falta decir que soy un principiante, especialmente cuando se trata de JavaScript y jQuery. Estoy buscando una manera de hacer que un div se desvanezca (a través de la visibilidad, no la opacidad) y uno se desvanezca.

Aquí hay un ejemplo del HTML que estoy buscando.

<div class="container">
 <div class="secondary" style="height:100px;width:100px;display:none;">
  When you hover over .main, .secondary fades in and .main fades out
 </div>
 <div class="main" style="height:100px;width:100px;">
  This text is visible by default
 </div>
</div>

Miré a mi alrededor y no pude encontrar exactamente lo que estaba buscando.

Muchas gracias de antemano