从中扩大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/