Acortar o automatizar codigo

[lockalt]

Hola!!

Tengo esta función en javascript:

Código Javascript:

<script type="text/javascript">
$(function() {
    $('.fp').each(function() {
        $(".fp01").hover(
        function() {
            $(".fp" ).stop().animate({ opacity: 0.3 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft01" ).stop().animate({ opacity: 1.0 }, 1000);
 
        },
        function() {
            $(".fp" ).stop().animate({ opacity: 1.0 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft01" ).stop().animate({ opacity: 0.0 }, 1000);
 
        })
        //
        //
        //
        $(".fp02").hover(
        function() {
            $(".fp" ).stop().animate({ opacity: 0.3 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft02" ).stop().animate({ opacity: 1.0 }, 1000);
 
        },
        function() {
            $(".fp" ).stop().animate({ opacity: 1.0 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft02" ).stop().animate({ opacity: 0.0 }, 1000);
 
        })
        //
        //
        //
        $(".fp03").hover(
        function() {
            $(".fp" ).stop().animate({ opacity: 0.3 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft03" ).stop().animate({ opacity: 1.0 }, 1000);
 
        },
        function() {
            $(".fp" ).stop().animate({ opacity: 1.0 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft03" ).stop().animate({ opacity: 0.0 }, 1000);
 
        })
        //
        //
        //
        $(".fp04").hover(
        function() {
            $(".fp" ).stop().animate({ opacity: 0.3 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft04" ).stop().animate({ opacity: 1.0 }, 1000);
 
        },
        function() {
            $(".fp" ).stop().animate({ opacity: 1.0 }, 1000);
            $(this).stop().animate({ opacity: 1.0 }, 800);
            $(".ft04" ).stop().animate({ opacity: 0.0 }, 1000);
 
        })
    });
});
 

Siempre es la misma función que se activa en una clase o en otra, esto lo tengo que reproducir unas 20 veces :(

Hay alguna manera para acortar o automatizar el código para que lo haga automático?
Ya que es el mismo nombre para todas las clases solo cambia el numero.

Gracias :)

[paskuini]

no soy muy ducho en la materia, pero... eso no podrias hacerlo con un for?

Código HTML:

<script type="text/javascript">
var i=0;
for (i=0;i<=20;i++)
{
                          aquí tu código
}
</script> 

[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>