[SOLUCIONADO] transition no funciona

fco_rmz · #1 (**permalink**) 20/01/2015, 01:27

Hola que tal, en mi pagina implemente un header dinamico, cuando bajo la pagina el header se reduce su tamaño y elimina objetos que se encuentran en el original, hice 2 cabeceras (header y .header2), la segunda de la mano de un codigo javascript elimina algunos objetos y acomoda su nuevo tamaño, lo que no se es donde agregar el codigo para que la transicion no sea tan brusca, se que este es el codigo pero no se donde ponerlo y que variables lleva

, ojala alguien me pudiera ayudar, tengo ya varios dias que no logro resolverlo, gracias!!

Código:

x,y,z{
-webkit-transition:height 0.5s;
-moz-transition:height 0.5s;
-ms-transition:height 0.5s;
-o-transition:height 0.5s;
transition:height 0.5s;
}

mi html:

Código:

<html>
  <head>
     <meta charset="UTF-8">
     <title> pagina </title>
     <link rel="stylesheet" href="fonts/style.css">
     <link rel="stylesheet" href="style.css">    
     <script src="necesarios/jquery-latest.js"></script>
     <script src="float.js"></script> 
     <script src="js/jquery.cycle.all.js"></script>
     <script type="text/javascript">
         $('#slider').cycle({ 
         fx:     'scrollHorz', 
         speed:  'slow', 
          
         next:   '#next', 
         prev:   '#prev' 
         });
     </script>
  </head>
  
  
  <body>

    <header>

      <div class="wrapper"> 
        <div class="inicio">
          <p>Contactanos al:  │ Correo: </p>
        </div> 
       
         
                <div class="redes">
              <nav> 
                <a href="#gg"><span class="icon-facebook4"></a>
                <a href="#tt"><span class="icon-twitter"></a>
                <a href="#nn"><span class="icon-youtube"></a>
                <a href="#cc"><span class="icon-linkedin3"></a>
                <a href="#tt"><span class="icon-google-plus2"></a>
              </nav>  
        </div>
        </div>
        <hr>



      <div class="wrapper">   


        <div class="logo">
          <a href="#lll"><img src="images/fwl.fw.png"></img></a>
        </div>    

      
        <div class="links">
          <nav> 
            <a href="#ggd">Soporte</a>
            <a href="#tt">Tienda</a>
            <a href="#nn">Contacto</a>
            <a href="#cc">Nosotros</a>
            
            
          </nav>         
        </div>
      
       </div><!-- wrapper -->   
     </header>



    <div id="wrapper">
      <div id="container">
        <div class="controller" id="prev"></div>
        <div id="slider">
          <img src="images/paris.jpg" width="100%" height="720">
          <img src="images/roma.jpg" width="100%" height="720">
          <img src="images/helsinki.jpg" width="100%" height="720">
        </div>  
         
        <div class="controller" id="next"></div>
      </div> 
    </div>  


   </body>  
 </html>

css:

Código:

* {
   margin: 0px;
   padding: 0px;
}


.wrapper{
  width: 70%;
  margin:auto;
  overflow: hidden;
}

.inicio{
  width: 100%;
  height: 30px;
  background-color: white;
}

.inicio p{
  padding-top: 4px;
  font-size: 14px;
  font-family: Segoe UI;
}

hr {
    border: none;
    height: 1px;
    background-color: #D8D8D8; /
}




header{
  height: 50px;
  width: 100%;
  background: white;  
  z-index:2;


}


/*-------------Java script--------------------------------------- */


.header2{
  height: 50px;
  position: fixed;
  background: white;
  width: 100%;
  box-shadow: -4px -3px 27px 0px  #888888;
}

header .inicio, header .redes{  <----asi lo he puesto pero no me funciona---------->
-webkit-transition:height 0.5s;
-moz-transition:height 0.5s;
-ms-transition:height 0.5s;
-o-transition:height 0.5s;
transition:height 0.5s;
}


.header2 .inicio{
  display: none;
}

.header2 .redes nav a{  
  display: none;
}


.header2 .logo img{
  margin-top: 8px;
}

.header2 .links nav{
  margin-top: -35px;
}

/*-------------Barra de navegacion--------------------------------------- */

.contacto{
  width: 350px; 
}


p span{
  margin-right: 5px;
  color: #FF8040;
  font-size: 20px;
  font-family: Segoe UI;
}

.redes nav{
  position: relative;
  float: right;
  margin-top: -23px;

}


.redes nav a {
  padding-left: 12px;
  text-decoration: none;
}


.icon-facebook4{
  color: #3b5998;
}

.icon-twitter{
 color: #00aced;  
}

.icon-youtube{
  color: #bb0000;
}

.icon-linkedin3{
  color: #007bb6;
}

.icon-google-plus2{
  color: #dd4b39;
}


.logo img{
  float: left;
  width: 220px;
  margin-top: 15px;
}


.links nav a {
  padding: 5px 10px;
  color: #A8A8A8;
  font-family: Segoe UI;
  text-decoration: none;
}

.links nav{
  position: absolute;
  right: 239px;
  top: 50px;
}

.links nav a:hover{
  color: white;
  background: #FF6317;
}


/*-------------Slideshow--------------------------------------- */

#wrapper{
  display: block;
  height: 720px;
  width: 100%;
}

#container{
  display: block;
  float: left;
  height: 700px;
  width: 100%;
  overflow: auto;
  margin-top: 50px;
  
}

#prev{
  background-image:url(images/leftArrow.png); 
  background-repeat:no-repeat;
  background-position: center center;
  display: block;
  float: left;
  height: 720px;
  width: 100px;
  position: relative;
  z-index:99;
}

#next{
  background-image:url(images/RightArrow.png); 
  background-repeat:no-repeat;
  background-position: center center;
  display: block;
  float: right;
  height: 720px;
  width: 100px;
  position: relative;
  z-index: 1; 
}

#slider{
  display: block;  
  height: 720px;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index:1;
}




/*--------------caracteristicas-----------------------------*/



#caract{
  width: 70%; 
  position: relative;
  top: 40px;
  margin: 0 auto;
  height: 1400px;
  z-index:1;
}


h4{
  color: #1E90FF;
  font-size: 14px;
}


p{
  color: #A9A9A9;
  font-size: 14px;
}


#engranes{
  width: 25%;
  float: left;
}

#candado{
  width: 25%;
  float: left;
}

#rayo{
  width: 25%;
  float: left;
}

#cohete{
  width: 25%;
  float: left;
}



.contenido{
  width: 100%;
  height: 2800px;
  
  top:100px; 
}

memoadian · #2 (**permalink**) 20/01/2015, 05:54

la velocidad de la transición se controla con el 0.5s que es igual a medio segundo cambialo por 1, 2, 3, 4, 5, 6 etc.

fco_rmz · #3 (**permalink**) 22/01/2015, 19:34

Hola, encontre el error, mis variables estab mal, yo agregue perimero las de .header2 y van las de header, ya lo haba hecho asi pero tal vez fue algun error de sintaxis, ahori noto la diferencia, gracias por su aportacion saludos..