從中擴大div的原始位置，以適應屏幕

Question

這是我走到這一步：http://jsfiddle.net/xj4hb2kt/4/

.expandable 
    { 
     position: fixed; 
     width: 100px; 
     height: 80px; 
     background-color: black; 
     -webkit-transition: all 1200ms ease-in-out; 
     -moz-transition: all 1200ms ease-in-out; 
     -o-transition: all 1200ms ease-in-out; 
     top: 60px; 
     left: 100px; 
    } 

    .expandable-expanded 
    { 
     position: fixed; 
     width: 100%; 
     height: 100%; 
     -webkit-transform: scale(100%); 
     transform: scale(100%); 
     z-index: 5; 
     top: 0px; 
     left: 0px; 
    } 

一切完美，但我不能使用「擴張」類「固定」的位置。沒有任何方法可以在不將「消耗性」位置設置爲固定的情況下執行此操作？謝謝！

Answer 1

試試這個CSS

.expandable-expanded 
     { 
      top:0px; 
      left:0px; 
      position: fixed; 
      width: 100%; 
      height: 100%; 
      -webkit-transform: scale(100%); 
      transform: scale(100%); 
      z-index: 5; 
     } 

與這個jQuery

$('.expandable').click(function() { 
    var self = $(this); 
    $(this).css('top',$(this).position().top); 
    $(this).css('left',$(this).position().left); 
    setTimeout(function(){ 
     self.toggleClass('expandable-expanded'); 
     self.css('top',0); 
     self.css('left',0); 
    },100); 
}); 

它作爲你的願望的工作？ http://jsfiddle.net/xng4pao6/1/