Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Acortar o automatizar codigo

Estas en el tema de Acortar o automatizar codigo en el foro de Frameworks JS en Foros del Web. Hola!! Tengo esta función en javascript : @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original < script type = "text/javascript" > $ ( function ( ) ...
  #1 (permalink)  
Antiguo 07/07/2011, 07:58
 
Fecha de Ingreso: febrero-2011
Mensajes: 18
Antigüedad: 13 años, 10 meses
Puntos: 0
Pregunta Acortar o automatizar codigo

Hola!!

Tengo esta función en javascript:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. $(function() {
  3.     $('.fp').each(function() {
  4.         $(".fp01").hover(
  5.         function() {
  6.             $(".fp" ).stop().animate({ opacity: 0.3 }, 1000);
  7.             $(this).stop().animate({ opacity: 1.0 }, 800);
  8.             $(".ft01" ).stop().animate({ opacity: 1.0 }, 1000);
  9.  
  10.         },
  11.         function() {
  12.             $(".fp" ).stop().animate({ opacity: 1.0 }, 1000);
  13.             $(this).stop().animate({ opacity: 1.0 }, 800);
  14.             $(".ft01" ).stop().animate({ opacity: 0.0 }, 1000);
  15.  
  16.         })
  17.         //
  18.         //
  19.         //
  20.         $(".fp02").hover(
  21.         function() {
  22.             $(".fp" ).stop().animate({ opacity: 0.3 }, 1000);
  23.             $(this).stop().animate({ opacity: 1.0 }, 800);
  24.             $(".ft02" ).stop().animate({ opacity: 1.0 }, 1000);
  25.  
  26.         },
  27.         function() {
  28.             $(".fp" ).stop().animate({ opacity: 1.0 }, 1000);
  29.             $(this).stop().animate({ opacity: 1.0 }, 800);
  30.             $(".ft02" ).stop().animate({ opacity: 0.0 }, 1000);
  31.  
  32.         })
  33.         //
  34.         //
  35.         //
  36.         $(".fp03").hover(
  37.         function() {
  38.             $(".fp" ).stop().animate({ opacity: 0.3 }, 1000);
  39.             $(this).stop().animate({ opacity: 1.0 }, 800);
  40.             $(".ft03" ).stop().animate({ opacity: 1.0 }, 1000);
  41.  
  42.         },
  43.         function() {
  44.             $(".fp" ).stop().animate({ opacity: 1.0 }, 1000);
  45.             $(this).stop().animate({ opacity: 1.0 }, 800);
  46.             $(".ft03" ).stop().animate({ opacity: 0.0 }, 1000);
  47.  
  48.         })
  49.         //
  50.         //
  51.         //
  52.         $(".fp04").hover(
  53.         function() {
  54.             $(".fp" ).stop().animate({ opacity: 0.3 }, 1000);
  55.             $(this).stop().animate({ opacity: 1.0 }, 800);
  56.             $(".ft04" ).stop().animate({ opacity: 1.0 }, 1000);
  57.  
  58.         },
  59.         function() {
  60.             $(".fp" ).stop().animate({ opacity: 1.0 }, 1000);
  61.             $(this).stop().animate({ opacity: 1.0 }, 800);
  62.             $(".ft04" ).stop().animate({ opacity: 0.0 }, 1000);
  63.  
  64.         })
  65.     });
  66. });

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 :)
  #2 (permalink)  
Antiguo 07/07/2011, 08:01
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 15 años, 5 meses
Puntos: 7
Respuesta: Acortar o automatizar codigo

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> 
  #3 (permalink)  
Antiguo 07/07/2011, 10:22
 
Fecha de Ingreso: febrero-2011
Mensajes: 18
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Acortar o automatizar codigo

Supongo que lo estoy poniendo mal :S
El html que tengo es:
Código HTML:
Ver original
  1. <!-- Contenido-->
  2. <div class="contenido">
  3.     <div class="familia">
  4.         <!-- Imagenes familia -->
  5.         <a href="#"><img class="fpa fp1" src="img/img01.jpg" alt=" "></a>
  6.         <a href="#"><img class="fpa fp2" src="img/img02.jpg alt=" "></a>
  7.         <a href="#"><img class="fpa fp3" src="img/img03.jpg alt=" "></a>
  8.         <a href="#"><img class="fpa fp4" src="img/img04.jpg alt=" "></a>
  9.         <!-- /Fin Imagenes familia -->
  10.         <!-- texto familia -->
  11.         <div class="text ft1" style="width:100px; left:300px;">
  12.             <h1>Lorem ipsum</h1><h2>Lorem ipsum</h2>
  13.         </div>
  14.         <div class="text ft2" style="width:100px; left:410px;">
  15.             <h1>Lorem ipsum</h1><h2>Lorem ipsum</h2>
  16.         </div>
  17.         <div class="text ft3" style="width:120px; left:504px;">
  18.             <h1>Lorem ipsum</h1><h2>Lorem ipsum</h2>
  19.         </div>
  20.         <div class="text ft4" style="width:100px; left:602px;">
  21.             <h1>Lorem ipsum</h1><h2>Lorem ipsum</h2>
  22.         </div>
  23.     <!-- /Fin texto familia -->
  24.     </div>
  25. </div>
  26. <!-- Fin contenido -->

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

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. var i=0;
  3. for (i=0;i<=20;i++)
  4. {
  5.     $(function() {
  6.     $('.fpa').each(function() {
  7.         $(".fp").hover(
  8.         function() {
  9.             $(".fpa").stop().animate({ opacity: 0.3 }, 1000);
  10.             $(this).stop().animate({ opacity: 1.0 }, 800);
  11.             $(".ft").stop().animate({ opacity: 1.0 }, 1000);
  12.  
  13.         },
  14.         function() {
  15.             $(".fpa").stop().animate({ opacity: 1.0 }, 1000);
  16.             $(this).stop().animate({ opacity: 1.0 }, 800);
  17.             $(".ft").stop().animate({ opacity: 0.0 }, 1000);
  18.  
  19.         })
  20.         //
  21.         //
  22.     });
  23. });
  24. }
  25. </script>

Etiquetas: acortar, automatizar, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:43.