tabs fadeout no anda

el_loco90 · #1 (**permalink**) 30/11/2012, 21:27

amigos:
tengo hecho unas pestañas jquery con tab, el poblema que tengo es que cuando cambio el fadein (efecto que opaca el contenido desde 0 a .5) a fadeout (efecto que eliminar la opacidad desde .5 a 0), el fadeout no me funciona

asi me anda:

Código Javascript:

Ver original<script type=text/javascript> 
 $(document).ready(function()
{
    $(".tab_content").hide();
    $("ul.tabs li:eq(0)").addClass("active").show();
    $(".tab_content:eq(0)").show();
    $("ul.tabs li").click(function()
       {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        return false;
    });
});
</script>

asi no:

Código Javascript:

Ver original<script type=text/javascript> 
 $(document).ready(function()
{
    $(".tab_content").hide();
    $("ul.tabs li:eq(0)").addClass("active").show();
    $(".tab_content:eq(0)").show();
    $("ul.tabs li").click(function()
       {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeOut();
        return false;
    });
});
</script>

lo que hago es esto: cambio el fadein por fadeout

Código Javascript:

Ver original$(activeTab).fadeOut();

cambio el fadein por fadeout pero no funciona, yo uso el jquery 2009
¿alguien sabe lo que puede ser?
gracias

jonni09lo · #2 (**permalink**) 01/12/2012, 08:28

Podrias mostrar la estructura html para poder ver seguir el orden de tu codigo?

el_loco90 · #3 (**permalink**) 01/12/2012, 16:25

Cita:

Iniciado por jonni09lo

Podrias mostrar la estructura html para poder ver seguir el orden de tu codigo?

como no amigo es asi:

Código HTML:

Ver original<?php
session_start();
include_once("../includes/procs.php"); 
include_once('../includes/conexiones.php'); 
include_once("../includes/clases.php");
//****************************************************************************************************
$empresa=$_SESSION['empresa'];
conectarse();
//****************************************************************************************************
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo $_SESSION["empresa"]." - Temas de ayuda";?></title>
<link href="stylo0.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="../images/faviconol.ico">
<link rel="stylesheet" href="calendar.css">
<script language="JavaScript" src="calendar_eu.js"></script>
<script type=text/javascript src="help.js"></script>
<script type=text/javascript src="jquery.min.js"></script>
<link rel=stylesheet type=text/css href="main.css">
<link rel=stylesheet type=text/css href="shadowbox.css">
<script type=text/javascript> 
 $(document).ready(function()
{
    $(".tab_content").hide();
    $("ul.tabs li:eq(0)").addClass("active").show();
    $(".tab_content:eq(0)").show();
    $("ul.tabs li").click(function()
       {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        return false;
    });
});
</script>
<style type="text/css">
.Estilo7 {color: #FF0000}
.style4 {font-family: Arial, Helvetica, sans-serif}
</style>
</head>
<body>
<table width="100%" height="74" border="0" align="center" class="pagina" >
<tr>
<td height="20">
  <?php 
  include("cabecera.php");
  include("barrausuario.php");
  ?>
  </td>
  </tr>
  <tr>
  <td width="100%" height="48" align="center" valign="top" class="tdcentro"><table width="100%" border="0" align="center">
  <tr>
  <td width="100%" height="24">
  <form action="temasdeayuda1.php" method="post">
  <div id=cuerpo>
  <div id=centro3>
  <UL class=tabs>
  <li><a href="#tab1">1</a></li>
  <li><a href="#tab2">2</a></li>
  <li><a href="#tab3">3</a></li>
  <li><a href="#tab4">4</a></li>
  <li><a href="#tab5">5</a></li>
  <li><a href="#tab6">6</a></li>
  <li><a href="#tab8">8</a></li>
  </ul>
  <div class=tab_container>
  <div id=tab1 class=tab_content>1</div>
  <div id=tab2 class=tab_content>2</div>
  <div id=tab3 class=tab_content>3</div>
  <div id=tab4 class=tab_content>4</div>
  <div id=tab5 class=tab_content>5</div>
  <div id=tab6 class=tab_content>6</div>
  <div id=tab7 class=tab_content>7</div>
  <div id=tab8 class=tab_content>8</div>
  </div>
  </div>
  </div>
</form>
</td>
</tr>
</table>
<div align="left">
<?php include("pie.php"); ?>
</div>
</td>
</tr>
</table>
</body>
</html>

el_loco90 · #4 (**permalink**) 01/12/2012, 16:32

ademas si saco el fadein y no pongo nada por ejemplo asi:

Código Javascript:

Ver original<script type=text/javascript> 
 $(document).ready(function()
{
    $(".tab_content").hide();
    $("ul.tabs li:eq(0)").addClass("active").show();
    $(".tab_content:eq(0)").show();
    $("ul.tabs li").click(function()
       {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab); //borro aca fadein y no me anda nada
        return false;
    });
});
</script>

el tema es que no quiero que me opaque las letras, borrando fadein no me anda nada.

jonni09lo · #5 (**permalink**) 02/12/2012, 09:54

Hola pues mira siguiendo el orden logico de tu estructura y viendo todo lo que haces

Código Javascript:

Ver originalvar activeTab = $(this).find("a").attr("href");
$(activeTab).fadeOut();

Hasta donde veo, como estas guardando la pestaña activa en activeTab el fadeout no funcionaria, ya que fadeout oculta las cosas no las muestra, esa es la razon por la cual no funciona con fadeout pero si con fadein.

Ademas te recomendaria que el fadein lo hagas sobre el elemento que deseas que se muestre en este caso el li, no el <a> ya que este es un hijo del li y logicamente podria traerte algunas complicaciones

Saludos