Acortar o automatizar codigo

[lockalt]

Supongo que lo estoy poniendo mal :S
El html que tengo es:

Código HTML:

<!-- Contenido-->
<div class="contenido">
    <div class="familia">
        <!-- Imagenes familia -->
        <a href="#"><img class="fpa fp1" src="img/img01.jpg" alt=" "></a>
        <a href="#"><img class="fpa fp2" src="img/img02.jpg alt=" "></a>
        <a href="#"><img class="fpa fp3" src="img/img03.jpg alt=" "></a>
        <a href="#"><img class="fpa fp4" src="img/img04.jpg alt=" "></a>
        <!-- /Fin Imagenes familia -->
        <!-- texto familia -->
        <div class="text ft1" style="width:100px; left:300px;">
            <h1>Lorem ipsum</h1><h2>Lorem ipsum</h2>
        </div>
        <div class="text ft2" style="width:100px; left:410px;">
            <h1>Lorem ipsum</h1><h2>Lorem ipsum</h2>
        </div>
        <div class="text ft3" style="width:120px; left:504px;">
            <h1>Lorem ipsum</h1><h2>Lorem ipsum</h2>
        </div>
        <div class="text ft4" style="width:100px; left:602px;">
            <h1>Lorem ipsum</h1><h2>Lorem ipsum</h2>
        </div>
    <!-- /Fin texto familia -->
    </div>
</div>
<!-- Fin contenido -->
 

Y con lo que me ponías y tenia he hecho, realizo:

Código Javascript:

<script type="text/javascript">
var i=0;
for (i=0;i<=20;i++)
{
    $(function() {
    $('.fpa').each(function() {
        $(".fp").hover(
        function() {
            $(".fpa").stop().animate({ opacity: 0.3 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft").stop().animate({ opacity: 1.0 }, 1000);
 
        },
        function() {
            $(".fpa").stop().animate({ opacity: 1.0 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft").stop().animate({ opacity: 0.0 }, 1000);
 
        })
        //
        //
    });
});
}
</script>