Foros del Web » Programando para Internet » Jquery »

Ayuda con Jquery y fadeIn fadeOut

Estas en el tema de Ayuda con Jquery y fadeIn fadeOut en el foro de Jquery en Foros del Web. Buenas, una ves mas vengo solicitando su ayuda...jejeje miren el problema es el siguiente, tengo un una lista de enlaces y lo que quiero hacer ...
  #1 (permalink)  
Antiguo 26/03/2010, 02:20
 
Fecha de Ingreso: enero-2010
Mensajes: 34
Antigüedad: 9 años, 10 meses
Puntos: 2
Ayuda con Jquery y fadeIn fadeOut

Buenas, una ves mas vengo solicitando su ayuda...jejeje miren el problema es el siguiente, tengo un una lista de enlaces y lo que quiero hacer es que al presionar un enlace me haga el fade in de un texto dentro de un contenedor, pero al presionar otro enlace haga el fade out el texto que habia y cargue el nuevo.

En resumen,
Problema: No hace fadeout al presionar otro enlace.

Supuesta "solucion": el codigo que dejo aqui abajo hace el fadein pero enseguida hace el fade out, es decir, sin presionar nada solito desaparece.

Hasta ahurita solo he logrado correctamente que me haga el fade in con cada enlace, pero al presionar otro no hace el fade out. Hasta ahurita esto es lo que tengo resuelto :

Código:
<ul >
	<li><a id="t_1" href="#" onclick="aparecer(1);">Enlace 1</a></li>
	<li><a id="t_2" href="#" onclick="aparecer(2);">Enlace 2</a></li>
	<li><a id="t_3" href="#" onclick="aparecer(3);">Enlace 3</a></li>
	<li><a id="t_4" href="#" onclick="aparecer(4);">Enlace 4</a></li>
</ul>
Código:
<div id="contenedorinfo">
    <div id="i_1" class="info">
    	esta es la info1
    </div>
   	<div id="i_2" class="info">
    	esta es la info2
    </div>
   	<div id="i_3" class="info">
    	esta es la info3
    </div>
   	<div id="i_4" class="info">
    	esta es la info4
    </div>
</div>
Código:
function aparecer(infoid){
    var enlaces = Array('1','2','3','4');
    var i;
    for (i=0;i<4;i++) {
        if (enlaces[i] == infoid)
        {
           $('#i_'+infoid).fadeIn('slow');
        } else {
           $('#i_'+infoid).fadeOut('slow');
        }
    }
}
jejeje weno si alguien me puede hechar una mano se los agradeceria imensamente. Gracias
  #2 (permalink)  
Antiguo 26/03/2010, 05:15
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años
Puntos: 65
Respuesta: Ayuda con Jquery y fadeIn fadeOut

Código HTML:
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
    $( function (){
        $('#enlaces a').click( function (){
            //Al div que esta visible lo oculto
            $('#contenedorinfo>div:visible').fadeOut();
            //Recupero el index del enlace clickeado
            index = $('#enlaces a').index( $(this) );
            //Muestro el div que tiene mismo indice que el enlace clickeado
            $('#contenedorinfo>div:eq('+index+')').fadeIn();
        });
    });
  </script>
  <style>
      #contenedorinfo>div{display:none}
  </style>
</head>
<body>

<ul id="enlaces">
	<li><a href="#">Enlace 1</a></li>
	<li><a href="#">Enlace 2</a></li>
	<li><a href="#">Enlace 3</a></li>
	<li><a href="#">Enlace 4</a></li>
</ul>

<div id="contenedorinfo">
    <div>
    	esta es la info1
    </div>
   	<div>
    	esta es la info2
    </div>
   	<div>
    	esta es la info3
    </div>
   	<div>
    	esta es la info4
    </div>
</div>

</body>
</html> 
  #3 (permalink)  
Antiguo 26/03/2010, 11:44
 
Fecha de Ingreso: enero-2010
Mensajes: 34
Antigüedad: 9 años, 10 meses
Puntos: 2
Respuesta: Ayuda con Jquery y fadeIn fadeOut

WOA¡¡¡¡ muchas gracias Dany_s sirvio al 100% jeje kreo ke yo estaba un poco lejos de la solucion ^^

Etiquetas: fadein, fadeout
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

SíEste tema le ha gustado a 2 personas




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