Foros del Web » Programando para Internet » Jquery »

tabs fadeout no anda

Estas en el tema de tabs fadeout no anda en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/11/2012, 20:27
 
Fecha de Ingreso: julio-2012
Mensajes: 234
Antigüedad: 7 años, 3 meses
Puntos: 9
tabs fadeout no anda

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
  1. <script type=text/javascript>
  2.  $(document).ready(function()
  3. {
  4.     $(".tab_content").hide();
  5.     $("ul.tabs li:eq(0)").addClass("active").show();
  6.     $(".tab_content:eq(0)").show();
  7.     $("ul.tabs li").click(function()
  8.        {
  9.         $("ul.tabs li").removeClass("active");
  10.         $(this).addClass("active");
  11.         $(".tab_content").hide();
  12.         var activeTab = $(this).find("a").attr("href");
  13.         $(activeTab).fadeIn();
  14.         return false;
  15.     });
  16. });
  17. </script>

asi no:
Código Javascript:
Ver original
  1. <script type=text/javascript>
  2.  $(document).ready(function()
  3. {
  4.     $(".tab_content").hide();
  5.     $("ul.tabs li:eq(0)").addClass("active").show();
  6.     $(".tab_content:eq(0)").show();
  7.     $("ul.tabs li").click(function()
  8.        {
  9.         $("ul.tabs li").removeClass("active");
  10.         $(this).addClass("active");
  11.         $(".tab_content").hide();
  12.         var activeTab = $(this).find("a").attr("href");
  13.         $(activeTab).fadeOut();
  14.         return false;
  15.     });
  16. });
  17. </script>

lo que hago es esto: cambio el fadein por fadeout
Código Javascript:
Ver original
  1. $(activeTab).fadeOut();

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

Última edición por el_loco90; 30/11/2012 a las 20:29 Razón: extra
  #2 (permalink)  
Antiguo 01/12/2012, 07:28
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 8 años, 1 mes
Puntos: 396
Respuesta: tabs fadeout no anda

Podrias mostrar la estructura html para poder ver seguir el orden de tu codigo?
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #3 (permalink)  
Antiguo 01/12/2012, 15:25
 
Fecha de Ingreso: julio-2012
Mensajes: 234
Antigüedad: 7 años, 3 meses
Puntos: 9
Respuesta: tabs fadeout no anda

Cita:
Iniciado por jonni09lo Ver Mensaje
Podrias mostrar la estructura html para poder ver seguir el orden de tu codigo?
como no amigo es asi:
Código HTML:
Ver original
  1. <?php
  2. session_start();
  3. include_once("../includes/procs.php");
  4. include_once('../includes/conexiones.php');
  5. include_once("../includes/clases.php");
  6. //****************************************************************************************************
  7. $empresa=$_SESSION['empresa'];
  8. conectarse();
  9. //****************************************************************************************************
  10. ?>
  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  12. <html xmlns="http://www.w3.org/1999/xhtml"><head>
  13. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  14. <title><?php echo $_SESSION["empresa"]." - Temas de ayuda";?></title>
  15. <link href="stylo0.css" rel="stylesheet" type="text/css" />
  16. <link rel="shortcut icon" type="image/x-icon" href="../images/faviconol.ico">
  17. <link rel="stylesheet" href="calendar.css">
  18. <script language="JavaScript" src="calendar_eu.js"></script>
  19. <script type=text/javascript src="help.js"></script>
  20. <script type=text/javascript src="jquery.min.js"></script>
  21. <link rel=stylesheet type=text/css href="main.css">
  22. <link rel=stylesheet type=text/css href="shadowbox.css">
  23. <script type=text/javascript>
  24.  $(document).ready(function()
  25. {
  26.     $(".tab_content").hide();
  27.     $("ul.tabs li:eq(0)").addClass("active").show();
  28.     $(".tab_content:eq(0)").show();
  29.     $("ul.tabs li").click(function()
  30.        {
  31.         $("ul.tabs li").removeClass("active");
  32.         $(this).addClass("active");
  33.         $(".tab_content").hide();
  34.         var activeTab = $(this).find("a").attr("href");
  35.         $(activeTab).fadeIn();
  36.         return false;
  37.     });
  38. });
  39. <style type="text/css">
  40. .Estilo7 {color: #FF0000}
  41. .style4 {font-family: Arial, Helvetica, sans-serif}
  42. </head>
  43. <table width="100%" height="74" border="0" align="center" class="pagina" >
  44. <tr>
  45. <td height="20">
  46.   <?php
  47.  include("cabecera.php");
  48.  include("barrausuario.php");
  49.  ?>
  50.   </td>
  51.   </tr>
  52.   <tr>
  53.   <td width="100%" height="48" align="center" valign="top" class="tdcentro"><table width="100%" border="0" align="center">
  54.   <tr>
  55.   <td width="100%" height="24">
  56.   <form action="temasdeayuda1.php" method="post">
  57.   <div id=cuerpo>
  58.   <div id=centro3>
  59.   <UL class=tabs>
  60.   <li><a href="#tab1">1</a></li>
  61.   <li><a href="#tab2">2</a></li>
  62.   <li><a href="#tab3">3</a></li>
  63.   <li><a href="#tab4">4</a></li>
  64.   <li><a href="#tab5">5</a></li>
  65.   <li><a href="#tab6">6</a></li>
  66.   <li><a href="#tab8">8</a></li>
  67.   </ul>
  68.   <div class=tab_container>
  69.   <div id=tab1 class=tab_content>1</div>
  70.   <div id=tab2 class=tab_content>2</div>
  71.   <div id=tab3 class=tab_content>3</div>
  72.   <div id=tab4 class=tab_content>4</div>
  73.   <div id=tab5 class=tab_content>5</div>
  74.   <div id=tab6 class=tab_content>6</div>
  75.   <div id=tab7 class=tab_content>7</div>
  76.   <div id=tab8 class=tab_content>8</div>
  77.   </div>
  78.   </div>
  79.   </div>
  80. </form>
  81. </td>
  82. </tr>
  83. <div align="left">
  84. <?php include("pie.php"); ?>
  85. </div>
  86. </td>
  87. </tr>
  88. </body>
  89. </html>
  #4 (permalink)  
Antiguo 01/12/2012, 15:32
 
Fecha de Ingreso: julio-2012
Mensajes: 234
Antigüedad: 7 años, 3 meses
Puntos: 9
Respuesta: tabs fadeout no anda

ademas si saco el fadein y no pongo nada por ejemplo asi:
Código Javascript:
Ver original
  1. <script type=text/javascript>
  2.  $(document).ready(function()
  3. {
  4.     $(".tab_content").hide();
  5.     $("ul.tabs li:eq(0)").addClass("active").show();
  6.     $(".tab_content:eq(0)").show();
  7.     $("ul.tabs li").click(function()
  8.        {
  9.         $("ul.tabs li").removeClass("active");
  10.         $(this).addClass("active");
  11.         $(".tab_content").hide();
  12.         var activeTab = $(this).find("a").attr("href");
  13.         $(activeTab); //borro aca fadein y no me anda nada
  14.         return false;
  15.     });
  16. });
  17. </script>

el tema es que no quiero que me opaque las letras, borrando fadein no me anda nada.
  #5 (permalink)  
Antiguo 02/12/2012, 08:54
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 8 años, 1 mes
Puntos: 396
Respuesta: tabs fadeout no anda

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

Código Javascript:
Ver original
  1. var activeTab = $(this).find("a").attr("href");
  2. $(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
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.

Etiquetas: anda, fadeout, funcion, tabs
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 23:48.