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

Fade in y Fade out con un clic

Estas en el tema de Fade in y Fade out con un clic en el foro de Frameworks JS en Foros del Web. Hola tengo un pequeño problemita y agradecería un montón a quien me ayude a resolverlo. Tengo un menú y quisiera que al cargar la pagina ...
  #1 (permalink)  
Antiguo 21/09/2013, 20:49
 
Fecha de Ingreso: mayo-2012
Mensajes: 117
Antigüedad: 12 años, 6 meses
Puntos: 1
Fade in y Fade out con un clic

Hola tengo un pequeño problemita y agradecería un montón a quien me ayude a resolverlo. Tengo un menú y quisiera que al cargar la pagina el primer menu presente la información sin que se le de clic.. pero que todos los demás menú allá que cliquear para que aparezca la info y mientras una aparece la otra se oculta.. Talvez se escuche complicado se que se hace con javascript pero no es mi fuerte aun estoy aprendiendo...

Solo logro hacer que aparesca al darle clic pero cuando cliqueo en otro este se queda a menos que lo clique otra vez para que desaparesca.. Me gustaria que apareciera al cargar la pagina y al cliquear otros que se esconda el primero y sucesivamente.

Código Javascript:
Ver original
  1. <script>
  2.  $(document).ready(function(){
  3.   $('#capa1').click(function(){
  4.    $('.arrow-left').toggle('fade',500);
  5.   });
  6.   $('#capa1').click(function(){
  7.    $('#contenido').toggle('fade',500);
  8.   });
  9.  });
  10.  
  11.   $(document).ready(function(){
  12.   $('#capa2').click(function(){
  13.    $('.arrow-left1').toggle('fade',500);
  14.   });
  15.  });
  16.  
  17.  $(document).ready(function(){
  18.   $('#capa3').click(function(){
  19.    $('.arrow-left2').toggle('fade',500);
  20.   });
  21.  });
  22.  
  23.  </script>


Código CSS:
Ver original
  1. <style>
  2. #container { margin-left:auto; margin-right:auto; width:900px; }
  3. #fondo{
  4.     height:auto;
  5.     width:900px;
  6.     margin-left:auto;
  7.     margin-right:auto; background-image:url(img/bg_yellow.jpg); background-repeat:no-repeat;
  8.     position:absolute;z-index:1; background-color:#FFFFFF; 
  9. }
  10.  
  11. ul{ list-style:none;}
  12.  
  13.  
  14. .ballimg1{border-radius:180px; height:300px; width:300px; position:absolute; z-index:2;border:solid 8px #ffe200;margin-left:-105px; margin-top:90px}
  15. .ballimg2{border-radius:180px; height:220px; width:220px; position:absolute; z-index:2;border:solid 8px #ffe200;margin-left:400px; margin-top:190px}
  16. .ballimg3{border-radius:180px; height:220px; width:220px; position:absolute; z-index:2;border:solid 8px #ffe200;margin-left:645px; margin-top:160px}
  17.  
  18. .list{ position:absolute; z-index:5; margin-left:-60px; margin-top:210px;color:#FFFFFF; font-size:3.5em;}
  19. .list1{ position:absolute; z-index:5; margin-left:470px; margin-top:275px;color:#FFFFFF; font-size:3.5em}
  20. .list2{ position:absolute; z-index:5; margin-left:670px; margin-top:245px;color:#FFFFFF; font-size:3em}
  21.  
  22. ul li:hover{ color:#00CCFF; display:block; -webkit-filter: hue-rotate(0deg); /* Normal */
  23. -webkit-filter: hue-rotate(180deg); /* Rotar la matriz 180 grados */
  24. -webkit-filter: hue-rotate(260deg); /* Rotar la matriz 270 grados */
  25. color:#FFFFFF;}
  26.        
  27. /*flechas*/
  28. .arrow-left {  
  29.    width: 0;
  30.    height: 0;
  31.    border-bottom:40px solid transparent;  /* left arrow slant */
  32.    border-top: 40px solid transparent; /* right arrow slant */
  33.    border-left: 120px solid #ffe200; /* bottom, add background color here */
  34.    font-size: 0;
  35.    line-height: 0;
  36.    -webkit-transform: rotate(60deg);
  37.     -moz-transform: rotate(60deg);
  38.     -o-transform: rotate(60deg);
  39.     -ms-transform: rotate(60deg);
  40.     transform: rotate(70deg);
  41.     position:absolute; margin-top:390px; margin-left:10px;
  42.     z-index:1; display:none
  43. }
  44.  
  45. .arrow-left1 {  
  46.    width: 0;
  47.    height: 0;
  48.    border-bottom:30px solid transparent;  /* left arrow slant */
  49.    border-top: 30px solid transparent; /* right arrow slant */
  50.    border-left: 80px solid #ffe200; /* bottom, add background color here */
  51.    font-size: 0;
  52.    line-height: 0;
  53.    -webkit-transform: rotate(80deg);
  54.     -moz-transform: rotate(80deg);
  55.     -o-transform: rotate(80deg);
  56.     -ms-transform: rotate(80deg);
  57.     transform: rotate(80deg);
  58.     position:absolute; margin-top:420px; margin-left:480px;
  59.     z-index:1;display:none;
  60. }
  61.  
  62. .arrow-left2 {  
  63.    width: 0;
  64.    height: 0;
  65.    border-bottom:30px solid transparent;  /* left arrow slant */
  66.    border-top: 30px solid transparent; /* right arrow slant */
  67.    border-left: 100px solid #ffe200; /* bottom, add background color here */
  68.    font-size: 0;
  69.    line-height: 0;
  70.    -webkit-transform: rotate(130deg);
  71.     -moz-transform: rotate(130deg);
  72.     -o-transform: rotate(130deg);
  73.     -ms-transform: rotate(130deg);
  74.     transform: rotate(130deg);
  75.     position:absolute; margin-top:380px; margin-left:700px;
  76.     z-index:1; display:none;   
  77. }
  78.  
  79. /*Tamano de las listas*/
  80. #con{ height:200px; width:200px; margin-top:20px}
  81.  
  82. /*Contenido*/
  83. #contenido{
  84.   height: 260px;
  85.   opacity: 1;
  86.   width: 690px;
  87.   display:none;
  88.   position:absolute; left:205px;  top:20px
  89. }
  90.  
  91. </style>

Código HTML:
Ver original
  1. <div id="container">
  2.    <div id="fondo">
  3.     <ul class="menu">
  4.    
  5.         <div id="con"><li id="capa1"><img class="ballimg1" src="img/IMG_4598.JPG" />
  6.         <span class="list">Restaurant</span> <div class="arrow-left"></div></li></div>
  7.        
  8.         <div id="con"><li id="capa2"><img class="ballimg2" src="img/IMG_4600.JPG" />
  9.         <span class="list1">Bar</span> <div class="arrow-left1"></div></li></div>
  10.        
  11.         <div id="con"><li id="capa3"><img class="ballimg3" src="img/IMG_4602.JPG" />
  12.         <span class="list2" id="dlist2">Timy Fast <br />&nbsp;&nbsp;&nbsp; Food</span><div class="arrow-left2"></div></li></div>
  13.     </ul>
  14.    
  15.         <div id="contenido"><h1 class="header">Rivera Restaurant</h1></div>
  16.    
  17.         </div>
  18.    
  19.    
  20. </div>
  21. </body>
  22. </html>

Si lo pueden visualizar en dreamweaver para que comprendan lo que quiero decir de antemano millon de gracias

Última edición por BaSingSe; 22/09/2013 a las 07:26

Etiquetas: clic, fade, html, 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 20:03.