jQuery: Làm thế nào để animate một div trung tâm để điền vào màn hình trong khi nó vẫn đang được tập trung?

Tôi đang cố gắng tạo hoạt ảnh cho một div để lấp đầy màn hình và sau đó quay lại kích thước ban đầu của nó. Tuy nhiên, khi tôi làm cho div điền vào màn hình nó không hoạt hình từ trung tâm, nó bắt đầu từ phía trên bên phải. Hơn nữa, khi tôi thu nhỏ nó, nó không quay trở lại vị trí bắt đầu nhưng ở trên cùng bên trái.jQuery: Làm thế nào để animate một div trung tâm để điền vào màn hình trong khi nó vẫn đang được tập trung?

Tôi có số jsfiddle code here. Tôi đang cố gắng làm cho nó hoạt động trơn tru từ điểm bắt đầu của nó ở trung tâm, lấp đầy màn hình và sau đó quay trở lại vị trí bắt đầu của nó như lúc bắt đầu.

Nguồn

2011-08-23 deztructicus

Trước khi hoạt ảnh div của bạn đã ở góc trên cùng bên trái, tại sao bạn thay đổi kiểu như thế ?? – MatTheCat

Một phương pháp mà không có sự div thêm được sử dụng bởi 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>

Nguồn

2011-08-23 15:09:33 Patrick

Tôi đề nghị rằng div di chuyển của bạn có luôn position: relative;, và chứa trong một div với position: absolute;, và rằng ông tập trung this way

Dưới đây là một ví dụ làm việc của những gì bạn muốn: http://jsfiddle.net/FP2DZ/.

Nguồn

2011-08-23 10:49:02

Câu trả lời chuyên nghiệp! Chúc mừng bạn đời :-) – deztructicus

@deztructicus bạn được chào đón –

Tôi nghĩ rằng đây là những gì bạn muốn:

<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>

Nhưng tôi đoán tôi đã hơi muộn;)

Nguồn

2011-08-23 12:14:05 Patrik

jQuery: Làm thế nào để animate một div trung tâm để điền vào màn hình trong khi nó vẫn đang được tập trung?

Trả lời

Các vấn đề liên quan