Ayuda con Jquery y fadeIn fadeOut

rigeliux1 · #1 (**permalink**) 26/03/2010, 01:20

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

Dany_s · #2 (**permalink**) 26/03/2010, 04:15

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>

rigeliux1 · #3 (**permalink**) 26/03/2010, 10:44

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