jQuery: ¿Cómo animar un div centrado para llenar la pantalla mientras todavía está centrado?

Estoy tratando de animar un div para llenar la pantalla y luego volver a su tamaño original de nuevo. Sin embargo, cuando hago que el div llene la pantalla, no se anima desde el centro, comienza desde la parte superior derecha. Además, cuando lo minimizo, no vuelve a la posición inicial, sino a la parte superior izquierda.jQuery: ¿Cómo animar un div centrado para llenar la pantalla mientras todavía está centrado?

Tengo jsfiddle code here. Intento que anime suavemente desde su punto de partida en el centro, llene la pantalla y luego hacia atrás hasta su posición inicial, como en el comienzo.

Fuente

2011-08-23 deztructicus

Antes de la animación de su div ya está en la esquina superior izquierda, ¿por qué cambiar su estilo de esa manera ?? – MatTheCat

Otro método sin el div adicional utilizado por pinouchon. jsFiddle is here:

<html> 
    <head> 
     <script type="text/javascript"> 
      var isFullscreen = false; 

      function fullscreen(){  
       var d = {}; 
       var speed = 900; 
       if(!isFullscreen){ // MAXIMIZATION 
        d.width = "100%"; 
        d.height = "100%"; 
        isFullscreen = true; 
        $("h1").slideUp(speed); 
       } 
       else{ // MINIMIZATION    
        d.width = "300px"; 
        d.height = "100px";    
        isFullscreen = false; 
        $("h1").slideDown(speed); 
       } 
       $("#controls").animate(d,speed);    
      } 

     </script> 
     <style> 
      #controls{ 
       width:300px; 
       height:100px; 
       margin: auto auto auto auto; 
      } 
      body, html{ 
       height:100%; 
      } 

     </style> 

    </head> 
    <body> 
     <h1 align=center> Header (To be covered on Fullscreen) </h1> 
     <div id='controls' style="background-color:green;" align="center"> 
      <input type='button' value='fullscreen' onclick='fullscreen();' /> 
     </div> 
    </body> 
</html>

Fuente

2011-08-23 15:09:33 Patrick

puedo sugerir que su movimiento tiene siempre div position: relative;, y contenido en un div con position: absolute;, y que se centra this way

Aquí está un ejemplo de trabajo de lo que quiere: http://jsfiddle.net/FP2DZ/.

Fuente

2011-08-23 10:49:02

¡Respuesta profesional! Cheers compañero :-) – deztructicus

@deztructicus De nada –

Creo que esto es lo que quiere:

<html> 
    <head> 
     <script type="text/javascript"> 
      var isFullscreen = false; 

      function fullscreen(){ 

       var d = {}; 
       var speed = 900; 
       if(!isFullscreen){ // MAXIMIZATION 

        d.width = "100%"; 
        d.height="100%";      
        d.left="0%"; 
        d.top="0%"; 
        d.marginLeft="0px"; 

        $("#controls").animate(d,speed); 
        isFullscreen = true; 

       }else{ // MINIMIZATION 

        d.width="300px"; 
        d.height="100px"; 
        d.left="50%"; 
        d.top="50%"; 
        d.marginLeft="-150px"; 


        $("#controls").animate(d,speed); 
        isFullscreen = false; 
       } 

      } 

     </script> 
     <style> 
      #controls{ 
       width:300px; 
       height:100px; 
       position: absolute; 
       top: 50%; 
       left: 50%; 
       margin-left: -150px; 
      } 
     </style> 
    </head> 
    <body> 
     <h1 align=center> Header (To be covered on Fullscreen) </h1> 
     <div id='controls' style="background-color:green;" align="center"> 
      <input type='button' value='fullscreen' onclick='fullscreen();' /> 
     </div> 
    </body> 
</html>

Pero supongo que era un poco tarde;)

Fuente

2011-08-23 12:14:05 Patrik

jQuery: ¿Cómo animar un div centrado para llenar la pantalla mientras todavía está centrado?

Respuesta

Cuestiones relacionadas